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EE5 二 
让 疏 


《JavaScript 开发 实战 》 是 一 本 入 门 指导 书 ， 适 合 没有 任何 编程 经 验 的 初学 者 。 书 中 的 代 
码 都 可 以 在 JS Bin 网 站 上 在 线 运行 。JS Bin 沙 盒 的 妙 处 在 于 ， 使 用 者 可 以 在 其 中 进行 代码 斌 
验 而 且 可 以 立即 查看 结果 。JS Bin 无 需 安装 ， 读 者 只 需 接 入 互联 网 ， 便 可 以 直接 使 用 。 如 果 
没有 接 入 互联 网 ， 也 不 必 担心 ， 本 书 中 已 经 列 出 打印 好 的 代码 清单 ， 并 包含 读者 易 懂 的 代码 
注释 和 文字 解释 。 

本 书 所 涉及 的 概念 都 附 有 简短 示例 。 除 此 之 外 ， 还 有 一 个 贯穿 全 书 的 持续 示例 一 The 
Crypt， 它 是 一 个 基于 文本 的 冒险 游戏 。 


本 书 的 读者 对 象 


如 果 你 在 工作 中 经 常 使 用 电脑 ， 使 用 各 种 应 用 程序 ， 只 是 以 前 没有 编写 过 程序 ， 但 是 你 
又 希望 学 习 如 何 编写 程序 , 那么 这 本 书 正 适合 你 。 本 书 没有 对 JavaScript 进行 面面俱到 的 讲述 ， 
而 是 通过 大 量 的 实例 和 练习 帮助 读者 学 习 JavaScript 编程 , 本 书 还 鼓励 读者 自己 去 进一步 思考 
和 探索 。 本 书 同样 适用 于 那些 已 经 是 程序 员 ,目前 正在 寻找 一 本 完整 的 JavaScript 参考 书 的 人 
群 。 如 果 你 想 要 一 本 仔细 详实 的 JavaScript 入 门 书 ， 也 请 驻足 ， 对 本 书 中 基础 知识 的 牢固 掌握 
将 有 助 于 你 未 来 轻松 阅读 其 他 编程 图 书 。 


本 书 的 章节 简介 


本 书 内 容 一 共 25 章 ， 其 中 纸 质 印刷 版 包括 21 章 内 容 ， 另 外 4 章 内 容 在 出 版 商 的 网 站 上 ， 

可 以 在 线 获取 : www.manning.com/books/get-programming-with-javascript。 本 书 中 有 大 量 的 代 

码 清单 和 练习 ， 以 及 难度 渐进 的 示例 ， 因 此 建议 读者 按 顺 序 阅 读 ， 并 且 在 线 试验 这 些 示 例 和 

练习 ， 以 期 读者 最 终 能 够 真正 理解 相关 概念 。 

第 一 部 分 介绍 JavaScript 编程 的 一 些 核心 概念 。 编 程 环境 为 JS Bin 基于 文本 的 控制 台面 

板 ， 该 环境 可 以 使 读者 专注 于 JavaScript 而 不 会 因为 网 页 问题 和 HIML 问题 而 分 散 注意 力 。 

其 中 : 

回 第 1 章 介 绍 编程 的 概念 。 本 章 的 编程 是 指 JavaScript 编程 在 引入 JS Bin〔 一 个 可 以 立 
即 编程 的 网 站 ) 沙 盒 环 境 之 前 的 编程 概念 。 本 章 还 向 读者 介绍 The Crypt， 这 是 一 球 基 

于 文本 的 冒险 游戏 ， 它 将 一 直 贯 穿 本 书 始终 。 

国 第 2 章 介绍 变量 ， 它 是 程序 中 标记 和 使 用 值 的 方法 。 变 量 狐 如 放 着 各 类 数据 的 硫 ， 它 

可 以 存放 数字 数据 或 文本 数据 。 变 量 的 命名 必须 遵循 某 些 规则 。 

国 在 第 3 章 中 ， 读 者 将 了 解 如 何 将 值 放 入 到 各 个 对 象 中 。 对 象 犹 如 一 个 急救 包 ， 医 护 人 
员 通 常 将 急救 包 作 为 一 个 整体 来 携带 和 传递 ， 只 有 在 需要 时 才 会 将 急救 包 内 的 某 个 物 
品 单独 取出 来 。 我 们 可 以 把 JavaScript 对 象 看 作 一 个 单独 的 项 目 ， 只 有 在 需要 时 才 会 
访问 对 象 的 某 个 属性 。 
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国 本 书 的 第 
组 织 代码 
数 ， 以 便 
函数 与 对 
第 8 章 介 
帖子 、 日 
表 、 访 问 


含 数 和 干 个 
象 进行 
函数 。 


Ar 
[可 


对 象 中 的 
和 设置 对 
值 ， 不 可 


本 书 在 第 一 部 


代码 。 


国 第 11 章 讨论 全 局 变量 和 局 部 变量 。 胡 


可 以 看 到 
程 中 ， 程 


绍 妈 


对 象 是 JavaScript 的 核心 ， 并 且 编 程 


在 第 10 章 ， 


4~7 间 介 和 


人 


象 完美 结合 。 
上 何 创 建 有 序列 表 ， 即 数 双 


函数 。 函 数 是 JavaScript 
， 并 可 以 根据 需要 多 次 执行 一 套 指 令 集 
读者 能 够 熟练 掌握 如 何 定 义 和 使 用 函数 ， 如 何 


日 。 在 编程 中 ， 程 


程 活动 、 各 个 用 户 名 、 影 评 等 
列表 、 操 作 列 表 以 及 删除 列表 。 


化 他 


象 的 属性 。 利 
预测 性 可 能 3 


分 介 


外 部 数据 或 用 户 的 


会 经 常人 


值 。 作 为 一 种 奉 代 性 访问 对 象 的 方法 ， 采 用 
] 方 括号 运算 符 ， 读 者 可 以 编 


整个 程序 


的 核心 内 容 ， 使 用 函数 可 以 帮助 程序 员 


CR 
上 o 


书 用 4 个 章节 的 篇 幅 来 讲述 函 
癌 函数 传递 数据 ， 以 及 如 何 将 


闻 员 经 常 采 用 列表 来 存放 博客 


一 系列 事项 。 在 本 章 ， 读 者 将 学 习 如 何 创建 列 


| 建 许多 对 象 。 例 如 ， 一 个 日 历 可 以 包 
事件 ,一 个 冒险 游戏 可 以 包含 数 十 个 地 点 。 构 造 函 数 是 一 种 对 许多 相似 的 对 
| 建 的 方式 。 第 9 章 探 讨 构造 函数 在 何 时 可 用 ， 以 及 如 何 定义 和 使 用 构造 


读者 会 看 到 方 括号 运算 符 ， 使 用 方 括号 运算 符 可 以 访问 存储 在 JavaScript 


输入 。 


绍 JavaScript 的 核心 概念 之 后 , 将 在 第 二 


在 函数 内 部 定义 的 


序 员 应 i 


和 实现 。 


国 想 要 在 程 ) 


这 中 使 


情况 下 才 
满足 相关 


国 随 着 程序 越 来 越 长 ， 有 必要 ; 


割 开 成 为 
块 的 功能 
其 中 包括 


在 读者 学 会 创建 模块 的 技巧 之 后 


Ea 


模型 帮助 
户 ( 例 如 


能 执行 代码 ， 这 样 会 增 力 
条 件 ， 然 后 再 使 用 用 户 的 输入 。 
各 程序 分 害 
模块 ， 可 以 使 模块 更 加 
更 加 独立 ， 易 于 更 新 和 


口 


程序 员 使 用 数据 (例如 日 
文本 、HTML 或 图 形 )， 控 制 


后 对 模型 


本 书 第 三 部 分 介 
的 输入 做 出 啊 应 。 


载 到 现 有 页 面 。 
国 第 17 


i 


至 则 


下 


进行 更 新 ， 再 传递 到 视图 进行 


局 部 变量 的 优势 。 在 决定 采用 
玄 考 虑 哪些 人 有 权 使 用 程序 的 代码 ， 还 应 该 考虑 如 何 


j 条 件 ， 请 学 习 本 书 第 12 章 内 容 。 条 件 意味 着 
[程序 的 灵活 性 ， 并 允许 程序 先 检查 用 户 的 输入 


别 成 模块 。 将 丸 
灵活 好 用 ， 方 便 移 植 到 各 个 项 目 中 ， 还 可 以 使 每 个 模 


FP 都 可 以 看 到 


方 括号 运算 符 可 以 更 灵活 地 获取 
写 一 些小 程序 来 处 理 不 可 预测 的 


如 何 更 好 地 组 织 


使 用 全 局 变量 的 危险 , 也 
局 变量 还 是 局 部 变量 的 过 


区 分 程序 的 接口 


和信 


口 


pa 


有 在 满足 某 条 


矶 否 


BP 些 可 以 组 合 和 替换 的 文件 独立 分 


E 护 。 第 13 章 探 讨 如 何 将 程序 代码 进行 模块 化 处 理 


显示 。 


~ 


两 个 重要 概念 : 命名 空间 和 立即 调用 函数 表达 式 。 

， 在 第 14 一 16 章 中 可 以 看 到 模块 的 三 个 重要 应 用 : 
历 事件 、 博 客 帖子 或 影评 )， 视 图 
器 使 用 模型 和 视图 ， 对 用 户 操作 做 出 响应 ， 然 


将 数据 呈现 给 用 


如 何 使 用 JavaScript 更 


新 网 页 ， 


这 部 分 还 介绍 了 


标题 、 段 落 或 列表 项 )， 以 及 图 像 、 视 频 、 


章 还 介 


国 为 了 捕获 用 户 输入 ， 需 要 使 用 HTML 控 们 


X 


要 介绍 超 文本 标记 语言 (HTML)， 该 语 
却 本 和 柱 


开通 过 按钮 、 下 拉 列 表 和 文本 机 
于 显示 重复 的 动态 数据 的 模板 ， 以 及 如 何 ; 


匡 对 用 户 
各 此 类 数据 加 


如 何 使 用 JavaScript 访问 和 更 新 页 国 


BR 


品 


于 指定 网 页 中 内 容 的 结构 (如 
FE 式 表 等 其 他 资源 的 加 载 方式 。 本 


[的 内 容 


F， 如 按钮 、 


下 拉 列 表 和 文本 框 。 第 18 章 介 


绍 如 何 设置 代码 才能 使 用 户 输入 信息 ， 并 且 在 用 户 单 击 某 个 按钮 时 ， 程 序 就 会 运行 。 
加 模板 提供 了 一 种 使 用 占 位 符 来 设计 数据 呈现 的 方法 。 在 第 19 章 ， 读 者 将 学 习 如 何在 
页 面 中 使 用 HTML 模板 , 并 用 数据 来 奉 换 模 板 中 的 占 位 符 。 这 样 可 以 避免 将 JavaScript、 
HTML 和 数据 混在 一 起 ， 能 够 用 一 种 清晰 明了 的 方式 ， 使 用 格式 化 信息 来 构建 网 页 。 

国 第 20 章 讲 解 如 何 使 用 XMLHttpRequest 对象 将 更 多 数据 加 载 到 网 页 中 ,通常 称 为 Ajax。 
这 些 技术 能 够 针对 用 户 的 动作 ， 使 用 新 数据 更 新 部 分 页 面 ， 从 而 使 应 用 程序 更 加 具有 
即时 响应 性 。 

国 第 21 章 为 本 书 最 后 一 章 ， 讨 论文 本 编辑 器 、 集 成 开发 环境 以 及 在 不 用 JS Bin 的 情形 

下 如 何 组 织 自己 的 文件 。 本 章 还 为 读者 进一步 深入 学 习 JavaScript 提出 建议 ， 并 预 祝 
读者 在 编程 的 历险 中 顺利 前 行 。 

本 书 的 第 22 一 25 章 内 容 在 纸 版 图 书 中 没有 包括 ， 仪 提供 在 线 版 本 ， 请 读者 访问 
www.manning.com/books/get-programmingwith-javascript。 这 4 章 为 进 阶 内 容 ， 介 绍 如 何 使 用 
Node.js 和 Express.js 在 服务 器 上 编程 ， 如 何 使 用 XHR 轮 询 服务 器 ， 并 与 Socket.IO 进行 实时 
通信 。 


关于 本 书 中 的 代码 


本 书包 含 许多 源 代 码 示 例 ， 以 编号 代码 清单 和 普通 文本 形式 呈现 。 源 代码 使 用 等 宽 字 体 
区 别 于 普通 文本 。 有 些 代码 用 粗 体 突出 显示 。 
在 多 数 情况 下 ， 本 书 对 原始 源 代码 的 格式 进行 了 重新 编排 ， 添 加 了 换行 和 缩 进 以 适合 
书 的 页 面 空间 。 在 少数 情况 下 ， 如 果 这 样 还 不 能 解决 问题 ， 本 书 就 在 代码 列表 中 采用 了 行 延 
续 标 记 〈 转 )。 此 外 ， 源 代码 中 的 注释 大 多 被 删除 ， 因 为 本 书 在 文本 部 分 已 经 对 相关 代码 进行 
了 描述 。 在 本 书 中 ， 代 码 清 单 、 重 要 概念 与 代码 注释 相伴 而 行 。 
本 书 中 的 大 多 数 代码 清单 都 包含 一 个 指向 链接 ， 通 过 该 链接 可 以 在 JS Bin 网 站 运行 这 些 
代码 并 进行 实验 。 另 外 ， 读 者 还 可 以 在 GitHub 和 曼 宁 网 站 获取 代码 ， 链 接 如 下 : 
https://github.conyjrlarsen/getprogramming 


www.manning.comy/books/get-programming-with-javascript 


其 他 在 线 资 源 
本 书 的 网 站 提供 本 书 的 练习 答案 、 视 频 教 程 、 进 阶 文 章 、JavaScript 学 习 指南 ， 以 及 其 他 
互联 网 上 的 资源 链接 。 
本 书 的 网 站 链接 是 www.room51.co.uk/books/getprogramming/index.html。 
关于 本 书 的 作者 

John Larsen 是 一 位 对 教育 研究 感 兴趣 的 数学 和 计算 机 教师 ， 他 拥有 数学 和 信息 技术 两 个 
硕士 学 位 。John Larsen 从 1982 年 开始 编程 ,在 1993 年 编写 简单 的 数学 教学 程序 ， 在 2001 年 
建立 多 个 网 站 ， 在 2006 年 开发 了 多 个 数据 驱动 的 基于 网 络 的 教学 应 用 程序 。 
作者 在 线 论 坛 

购买 《JavaScript 开发 实战 》 一 书后 可 以 免费 访问 由 曼 宁 出 版 物 有 限 公 司 运营 的 客户 网 络 

XI 


论坛 。 读 者 可 以 对 该 书 进行 评论 ， 提 出 技术 问题 ， 并 从 本 书 作者 和 其 他 用 户 处 获得 帮助 。 欲 


访问 并 参与 该 论坛 ， 请 访问 www.manning.com/books/get-programming-with-javascript。 


一 经 注册 ， 便 可 得 到 在 线 帮 助 。 曼 宁 出 版 物 有 限 公司 承诺 为 读者 提供 这 样 一 个 交流 平台 ， 在 


该 论坛 


这 个 论坛 中 ， 读 者 之 间 以 及 读者 和 作者 之 间 都 可 以 进行 有 意义 的 对 话 。 我 们 不 会 对 作者 在 该 
论坛 中 的 具体 参与 量 做 出 任何 承诺 ， 作 者 在 该 论坛 上 与 读者 的 互动 都 是 出 于 自愿 并 且 无 任何 


报酬 的 。 和 希望 读者 能 够 向 本 书 作者 提出 一 些 具 有 挑战 性 的 问题 ， 以 免 他 在 该 论坛 的 兴趣 和 热 


情 天 失 歼 尽 ! 


历史 记录 。 
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在 本 书 出 版 发 行 期 间 ， 读 者 可 以 从 出 版 商 的 网 站 访问 作者 的 在 线 论 坛 ， 并 浏览 该 论坛 的 
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第 一 部 分 “控制 全 上 的 核心 概念 


《JavaScript 开发 实战 》 的 第 一 部 分 讲解 了 程序 设计 中 的 一 些 核 心 概念 。 这 些 概 念 是 后 续 
代码 的 基础 ， 将 辅 以 示例 逐一 呈现 。 贯 穿 本 书 始末 的 重要 主题 是 如 何 用 变量 来 存储 和 读 取 
值 ， 如 何 用 对 象 和 数组 来 聚合 值 以 及 如 何 用 函数 来 集合 指令 。 在 第 一 部 分 的 结尾 ， 将 构建 一 
个 冒险 游戏 的 开发 版 ， 名 为 The Crypt。 玩 家 可 以 探索 地 图 上 的 各 个 场所 ， 从 一 个 房间 移动 
到 另 一 个 房间 ， 从 一 座 坟墓 移动 到 另 一 座 坟 墓 ， 不 断 地 收集 宝贝 。 第 1 章 通过 介绍 编程 、 
JavaScript、JS Bin 以 及 玩家 进行 探险 的 在 线 代码 环境 来 设置 游戏 的 背景 。 让 我 们 开始 吧 ! 


第 1 介 编程 、JavaScript 和 JS Bin 


本 章 内 容 包括 : 

图 编程 

国 JavaScript 

国 JS Bin 

图 本 书 持续 范例 : The Crypt 


《JavaScript 开发 实战 》 是 一 本 入 门 级 的 编程 书 。 通 过 代码 示例 ， 配 合 详细 的 讲解 和 视频 
辅导 ， 本 书 将 帮助 读者 提升 编写 代码 的 知识 和 技能 。 

本 章 首先 介绍 编程 概念 和 JavaScript 编程 ， 然 后 介绍 JS Bin 一 一 读者 即将 学 习 使 用 的 在 
线 编程 环境 ， 最 后 是 本 书 的 一 个 持续 范例 ， 游戏 The Crypt。 


1.1 编程 


编程 是 给 计算 机 发 出 一 系列 它 可 以 理解 的 指令 。 程 序 无 处 不 在 ， 例 如 火星 探测 器 、 大 型 
强 子 对 撞 机 、 发 动机 管理 系统 、 金 融 市 场 、 无 人 机 、 手 机 、 平 板 电脑 、 电 视 、 医 学 设备 等 ， 
程序 的 威力 令 人 叹为观止 。 程 序 短 则 只 有 几 行 代码 ， 长 则 可 达 数 百 万 行 ， 由 各 个 简单 的 模块 
组 建成 复杂 的 解决 方案 。 

计算 机 的 内 部 是 二 进 制 、 计 数 器 、 寄 存 器 、 总 线 和 存储 器 的 天 地 。 人 们 最 初 使 用 低级 编 
程 语言 让 它们 运行 工作 ， 例 如 : 机 器 语言 和 汇编 语言 。 幸 运 的 是 ， 我 们 已 经 创建 了 更 容易 阅 
读 、 继 承 和 使 用 的 高 级 语言 。 我 们 编写 的 程序 代码 可 以 让 任何 人 理解 ， 下 面 是 一 些 接近 高 级 
语言 的 伪 代 码 : 


increase score by 100 
if Score is greater than 5000 print "Congratulations! You winln 


otherwise load new level 
不 同 的 编程 语言 会 条 理 清晰 地 告诉 你 该 如 何 写 这 样 的 代码 : 一 些 编程 语言 会 更 多 地 
使 用 符 写 ， 男 一 些 编程 语言 会 更 多 地 使 用 自然 语言 。 用 JavaScript 实现 上 述 伪 人 代码， 如 
下 所 示 : 


score = score + 100; 
if (score > 5000) 
alert ("Congratulations! You win!"),; 


} 


else 


{ 


JavaScript 开发 实战 


loadNewLevel () ; 


} 


代码 。 


lll 


如 何 加 载 游 戏 的 新 级 别 ， 在 程序 的 其 他 地 方 会 有 更 多 的 代码 


圆 括号 、 花 括号 和 分 号 都 是 编程 语言 语法 的 一 部 分 ， 都 是 用 来 前 明 程 序 代 码 的 规范 ， 可 
以 被 计算 机 所 理解 。 以 上 程序 将 自动 翻译 成 能 够 让 计算 机 执行 的 低级 语 
在 上 述 JavaScript 代码 段 中 ，loadNewLevel0 语 名 的 作用 是 在 游戏 中 加 载 新 的 级 别 。 关 于 


述 来 逐步 说 明 。 编 程 中 有 一 种 


技巧 是 将 复杂 的 项 目 分 解 成 多 个 能 够 执行 特定 功能 的 小 模块 ， 然 后 将 这 些小 模块 连接 起 来 ， 


以 实现 主 程序 的 需要 。 


编程 语言 有 很 多 ， 如 Java、C、PHP、Python 和 Swift， 下 面 看 看 为 什么 本 书 会 选择 


JavaScript。 


1.2 JavaScript 


JavaScript 是 一 种 非常 流行 的 程序 设计 语言 ， 常 用 于 网 络 浏览 器 ， 其 实在 其 他 环境 中 ， 


JavaScript 也 变 得 越 来 越 受 欢迎 。JavaScript 为 网 页 增加 了 互动 性 


熟 网 页 应 用 程序 的 表单 验证 。 服 务 器 程序 使 得 在 互联 网 上 可 以 


进行 数据 查询 。 随 着 越 来 越 多 的 网 络 化 对 象 出 现在 物 联网 ! 
人 、 无 人 机 和 Arduino 式 电 子 器 件 的 编程 领域 越 来 越 受 欢迎 。 


从 简单 的 动画 效果 到 成 


使 用 的 文件 、 网 页 和 


学 习 程序 设计 将 使 你 获得 一 项 高 明 的 技术 ， 这 些 技术 是 通 


他 资源 
都 能 够 通过 带 有 Node.js 的 JavaScript 编写 出 来 。 其 他 软件 也 可 以 使 用 JavaScript 编写 ， 例 如 
Photoshop 和 Minecraft， 男 外 ， 一 些 数据 库 能 够 存储 JavaScript， 同 时 也 可 以 使 用 JavaScript 
，JavaScript 在 传感器 、 机 器 


的 、 实 用 的 、 有 新 意 的 、 有 


创造 性 的 、 有 趣 的 和 有 价值 的 ， 并 且 在 这 个 时 代 也 是 有 需求 的 。 


学 习 JavaScript 编程 会 让 你 


轻松 驾驭 世界 上 使 用 最 广泛 的 计算 机 语言 ， 开 发 出 针对 各 种 用 途 、 设 备 、 平 台 和 操作 系统 的 


应 用 程序 。 


1.3 在 实践 和 思考 中 学 习 


《JavaScript 开发 实战 》 的 学 习 理 念 是 :通过 在 线 沙 盒 中 的 


语法 概念 ， 这 样 的 思考 有 助 于 读者 更 加 深入 地 理解 和 学 习 。 


编程 练习 ， 让 程序 开发 者 直接 
看 到 什么 是 可 执行 的 ， 什 么 是 不 能 执行 的 ， 通 过 不 断 地 尝试 挑战 ， 读 者 将 认真 思考 每 一 章 的 


在 沙 盒 中 运行 程序 可 以 立刻 得 到 运行 结果 ， 有 时 候 得 到 的 结果 会 出 乎 意料 ， 这 将 迫使 程 


序 开发 者 质疑 自己 的 所 思 所 知 。 他 们 有 时 能 很 快 获得 解决 问题 


很 长 的 时 间 。 这 些 问题 的 解决 方案 都 需要 开发 者 认真 地 思索 ， 


序 员 。 


的 思路 和 方法 ， 有 时 却 要 花费 


并 通过 实验 去 检验 。 好 奇 、 努 
力 和 坚持 是 学 习 任何 东西 的 关键 态度 ， 这 些 积极 的 学 习 态 度 一 定 会 帮助 你 成 为 一 名 出 色 的 程 


这 并 不 是 说 学 习 编 程 会 是 一 件 兰 差 事 ! 即使 从 事 编程 工作 三 十 多 年 ， 我 仍然 觉得 将 代 
码 转换 成 一 个 有 用 或 是 有 趣 的 应 用 程序 ， 将 儿 行 简单 的 语句 结合 起 来 就 可 以 实现 各 种 各 样 


的 效果 是 如 此 神奇 和 不 可 思议 。 看 到 别人 因为 使 用 我 设计 的 程序 而 变 得 更 有 效率 、 更 有 


条 
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里 ， 哪 怕 仅 仅 是 为 他 们 带 来 更 多 的 乐趣 ， 也 会 让 我 感觉 荣幸 之 至 ， 编 程 让 我 如 此 快乐 ! 

让 我 们 做 好 准备 ， 来 一 次 探险 之 旅 吧 ! 如 果 刚 开始 就 发 现 有 些 概念 非常 塌 手 ， 请 不 要 灰 
心 ， 慢 慢 来 ， 多 做 一 些 练习 。 不 要 忘记 使 用 本 书 网 站 上 的 资源 ， 那 里 有 代码 清单 、 解 决 方 
案 、 学 习 视 频 和 进 阶 学 习 ， 网 址 为 www.room51.co.uk/books/getprogramming/index.html。 学 习 
之 后 ， 你 会 发 现 所 有 付出 的 时 间 和 精力 都 是 值得 的 。 


1.4 JS Bin 


JavaScript 通常 在 网 页 上 运行 。 浏 览 器 从 服务 器 加 载 了 一 个 可 能 包含 JavaScript 代码 或 超 
链接 的 网 页 ， 然 后 解析 代码 并 执行 指令 。 在 《JavaScript 开发 实战 》 的 第 一 部 分 中 ， 请 读者 
避免 过 多 考虑 含有 JavaScript 代码 的 网 页 制作 ， 而 只 需要 专注 JavaScript 语言 本 身 ， 完 全 可 
以 利用 免费 在 线 服务 JS Bin， 

JS Bin 是 一 个 用 于 网 页 和 JavaScript 程序 开发 及 共享 的 在 线 沙 盒 。 本 书 中 列 出 的 所 有 代码 
清单 都 可 以 在 JS Bin (wwwjsbin.com) 中 找到 ，JS Bin 为 读者 提供 了 编码 练习 和 实践 的 机 会 。 

初次 访问 该 网 址 ， 会 在 标题 部 分 看 到 Dave 图 片 和 一 些 帮助 性 的 链接 ， 这 些 链接 可 以 帮 
助 使 用 者 熟悉 和 使 用 JS Bin， 如 图 1-1 所 示 。 大 胆 地 去 探索 和 学 习 吧 ! 千 万 不 要 因为 链接 的 
信息 过 于 复杂 而 放弃 。 浏 览 完毕 ， 请 点 击 Dave 图 片 左 侧 的 “X” 按 钮 ， 关 闭 信息 面板 〈 使 
用 者 可 以 关闭 JS Bin 显示 的 任何 欢迎 信息 或 其 他 信息 )。 


站 PH 位 5 ; 人 二 
关闭 信息 面板 面板 切换 按钮 信息 面板 
spincom 6 of a 

JS Bin features » Pro features » Blog” 

Getting started Private bins Live reloading CSS 

Keyboard Shortcuts Dropbox backup 

Help» 
Exporting/importing gist anity URLs 
How to clear the console 
| How do | set default code in all 
Open bin... | = new bins? 
Textarea editor mode 
File ~ Add library HIML CSS JavaScript Console Output [| Account Blog Help 
HTML ~ CSS ~ Output Run with Js | Auto-run JS [ 
1 <!DOCTYPE html> 1 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 <titLe>]S Bin</title> 
6 </head> 
7 <body> 
8 
9 </body> 
19 </html> 
HTML 面 板 CSS 面 板 Output 面 板 


图 1-1 JSBin 上 的 各 面板 : HTML、CSS、Output 和 信息 面板 


1.4.1 JS Bin 面板 


JS Bin 是 用 于 开发 网 页 和 应 用 程序 的 工具 。 除 了 位 于 顶部 的 信息 面板 ， 还 有 5 个 面板 可 
供 显示 ,分别 是 HTML、CSS、JavaScript、Console〔 控 制 台 〉 和 Output〈 输 出 )。 单 击 JS 
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Bin 工具 栏 上 的 面板 名 称 可 以 打开 或 关闭 该 面板 。 在 本 书 的 第 一 部 分 ， 只 需要 使 用 JavaScript 


面板 和 Console 面板 ; 在 第 二 部 分 ， 将 使 用 HTML 
Output 面板 。 本 章 只 使 用 JavaScript 和 Console 面板 ， 
关闭 其 他 面板 ， 如 图 1-2 所 示 。 


面板 ， 在 第 三 部 分 ， 将 添加 CSS 和 
因此 先 来 学 习 如 何 切 换 这 两 个 面板 并 


》 


Soe kbin.con) SP OU 人 oo 区 
加 Fiev Add library HTML CSS JavaScript Console QOutput 国 ecoun Blog Help 
JavaScript ~ Console Run | | Clear 


图 1-2 JSBin 上 显示 的 JavaScript 玫 


1. HTML 


| 板 和 Console 面板 


HTML 用 于 构造 网 页 的 内 容 ， 如 文字 、 图 片 、 视 频 和 表单 都 是 网 页 的 内 容 。 


2. CSS 


CSS《〈 级 联 样式 表 ) 确定 网 页 应 该 以 什么 样 的 外 观 向 用 户 呈 现 ， 用 于 定义 背景 颜色 、 字 


体 、 边 距 和 大 小 等 。 
3. JavaScript 
JavaScript 向 网 页 添加 动作 和 交互 ， 用 于 编写 网 页 
4. Console 

程序 可 以 通过 控制 台 向 用 户 和 开发 人 员 显 示 信 息 ， 


互 式 的 ， 开 发 人 员 可 以 在 控制 台 上 输入 信息 来 查找 某 个 程序 的 状态 。 对 于 已 经 开发 完成 的 应 
程序 ， 通 常 不 再 使 用 控制 台 ， 但 在 学 习 编程 阶段 ， 读 者 可 以 很 好 地 利用 它 与 程序 进行 简单 


$. Output 


内 容 之 外 的 程序 。 


a 


\ 


如 错误 提示 和 警告 提示 。 控 制 


六 


Output 面板 可 以 预览 已 经 在 HTML、CSS 和 JavaScript 面板 中 编 好 的 网 页 。Output 面板 
显示 的 内 容 与 网 页 访问 者 在 浏览 器 中 看 到 的 内 容 完全 一 致 。 


1.4.2 在 JS Bin 上 运行 代码 清单 


开发 人 员 通 过 向 JS Bin 的 JavaScript 面板 添加 代码 来 编写 程序 。 随 着 代码 功能 的 增加 ， 


程序 将 逐渐 变 得 越 来 越 复 杂 。 对 于 本 书 第 一 部 分 中 的 大 多 数 代码 清单 ， 可 以 按照 以 下 步骤 在 


JS Bin 中 进行 测试 ， 如 图 1-3 所 示 。 


1-3 是 在 JS Bin 上 运行 JavaScript 步骤 的 截图 。 本 书 中 的 大 多 数 代码 清单 都 有 一 个 指 


向 JS Bin 上 相同 代码 的 链接 。JS Bin 上 的 代码 清单 包括 与 之 相关 的 额外 信息 和 练习 ， 将 在 
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入 1 立 


第 1 章 编程、JavaScript 和 JS Bin 
1. 在 JS Bin 的 File 文 件 2. 切换 面板 ， 以 使 JavaScript 4. 单 击 Run 运 行 
菜单 上 选择 New 命 令 面板 和 Console 面 板 都 可 见 
Seil < > 作 加 . jsbincon| OO da 
加 Fie - Addlibray Share HTML CSS ，JavaScript ，Console 。 Output 国 eeourt Blog Help 


JavaScript ~ 
1 console.log("Hello World!"); 


> 


3. 在 JavaScript 面 板 中 输入 代码 


Console 


Run Clear 


"Hello World!" 


Bin info 
Just now 


5. 在 Console 面 板 上 查看 结果 


图 1-3 在 JSBin 上 运行 JavaScript 的 步骤 


1.4.3 输出 到 控制 台 


全 


如 果 希 望 程序 能 够 在 Console 面板 上 输出 信 ， 
运行 程序 就 会 在 Console 上 显示 以 下 内 容 : 


console.log("Hello World!"),; 


如 上 所 示 ， 将 欲 显示 的 信息 放 在 括号 内 的 引 

请 注意 ， 代 码 清单 标题 部 分 
人 码 。 要 在 JavaScript 面板 中 执行 代码 ， 请 单 击 
“Hello World!” 出 现在 Console 面板 上 。 


> Hello World! 


县 ， 请 使 用 


console.log 命令 。 


代码 清单 1-1 使 用 console.log 显示 信息 
(http://JS Bin.com/mujepu/edit?js,console) 


号 之 间 。 


包含 JS Bin 链接 ， 单 击 该 链接 可 以 查看 在 JS Bin 上 的 代 


Console 面板 顶部 的 Run 按钮 ， 就 会 看 到 


读者 可 以 尝试 多 次 点 击 Run。 每 次 单 击 Run， 代 码 就 会 运行 一 次 ,“Hello World!” 就 会 


又 一 次 出 现在 Console 面板 上 。 欲 清 


1.4.4 ”代码 注释 
除了 代码 语句 本 身 ， 本 书 的 JS Bin 代码 清 


分 ， 


i 


除 Console 面板 上 的 所 有 信息 ， 请 单 击 Clear 按钮 。 
当 通 过 JS Bin 链接 访问 JS Bin 上 的 代码 时 ， 
用 户 ， 可 以 在 JS Bin 的 首选 项 中 关闭 该 自动 运行 选项 。 


程序 会 自动 运行 。 如 果 你 是 JS Bin 的 注册 


单 还 包括 注释 。 注 释文 本 并 不 是 程序 的 一 部 


有 助 于 读者 理解 代码 。 以 下 是 JS Bin 代码 清单 1-1 的 第 一 个 多 行 注释 : 


/* Get Programming with JavaScript 


* Listing 1-1 
* Using console.1log 
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这 些 多 行 注 释 可 以 跨越 多 行 。 除 了 多 行 注 释 ， 有 时 也 会 看 到 单行 注释 ， 例 如 ; 


// This is a single-line comment 


在 JS Bin 上 ， 注 释 通常 以 绿色 显示 。 如 果 程 序 开发 者 认为 需要 添加 一 些 解 释 以 供 其 他 程 
序 员 理解 ， 就 可 以 在 他 们 的 代码 中 添加 注释 。 当 计算 机 执行 程序 时 ， 会 自动 忽略 这 些 注 释 。 


1.4.5 Further Adventures 进 阶 练习 


《JavaScript 开发 实战 》 在 JS Bin 中 的 大 多 数 代码 清单 都 附带 了 一 组 名 为 Further 
Adventures 的 进 阶 练习 ， 内 容 包括 代码 和 注释 。 这 些 练习 有 些 很 简单 ， 有 些 有 重复 ， 还 有 一 
些 比较 难 ， 具 有 挑战 性 。 学 习 编 程 的 最 好 方法 是 实际 动手 去 编程 ， 所 以 希望 读者 能 鼓 足 勇 
气 ， 接 受 挑战 。 读 者 可 以 从 Manning Forums 〈 曼 宁 论 坛 ) 获得 帮助 ， 并 在 以 下 网 站 得 到 本 书 
所 布置 任务 的 解决 方案 : 


www.manning.com/books/get-programming-with-javascript 


WWwwW .room51.co.uk/books/getprogramming/index.html 


1.4.6 ”错误 消息 

向 JavaScript 面板 添加 代码 时 ，JS Bin 会 不 断 检 查 代 码 中 是 否 有 错误 ， 并 将 错误 显示 在 
JavaScript 面板 底部 的 一 个 红色 区 域内 。 开 发 者 如 果 正 处 于 添加 一 行 代码 的 过 程 中 ， 不 必 理 
会 该 红色 错误 区 。 如 果 已 经 完成 了 一 行 代码 的 添加 ， 红 色 错 误区 依然 存在 ， 请 单 击 该 红色 错 
误区 ， 查 看 具体 的 错误 消息 。 例 如 ， 尝 试 从 代码 清单 1-1 中 的 代码 行 末 尾 删 除 分 号 。 图 1-4 
显示 了 JS Bin 响应 删除 分 号 时 出 现 的 错误 。 


加 File - Addlibray Share 加 Fie- Addlibraryy Share 


JavaScript ~ JavaScript ~ 


1 console.log("Hello World!") | 1 console.log("Hello World!") 


v ©@ 1error 


四 Line 1: Missing semicolon. 


r ©@ 1error | 


图 1-4 JS Bin 错误 消息 提示 区 域 〈 收 起 状态 和 展开 状态 ) 


分 号 表示 一 行 代码 的 结束 。 以 分 号 结尾 的 每 一 行 代 码 称 为 一 条 语句 。 如 果 停 止 输入 代 
码 ， 但 没有 用 分 号 去 结束 ，JS Bin 会 报错 。JavaScript 会 在 它 认 为 应 该 有 分 号 的 地 方 插入 分 
号 ， 这 样 程序 才 会 继续 运行 。 但 最 好 还 是 程序 员 自 己 把 分 号 加 上 ， 在 JS Bin 中 不 断 地 对 错误 
进行 纠正 可 以 提高 程序 开发 者 的 编程 实践 水 平 。 

JS Bin 会 尽力 提供 错误 消息 以 帮助 使 用 者 解决 问题 。 如 果 从 代码 行 的 未 端 逐 个 删除 字 
符 ， 就 会 看 到 JS Bin 不 断 更 新 报错 信息 。 
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1.4.7 行 号 


第 1 章 编程 、JavaScript 和 JS Bin 


1-4 中 的 错误 信息 中 提示 了 发 生 错 误 的 行 号 。 因 为 该 示例 中 只 有 一 行 代码 ， 所 以 错误 


就 在 第 1 行 (Line 


着 在 JS Bin 错误 图 


1)。 当 程序 变 得 很 长 时 ， 能 够 看 到 代码 的 行 号 就 变 得 非常 有 意义 了 。 程 序 


开发 者 并 不 需要 用 手工 方式 为 代码 添加 行 号 ， 文 本 编辑 器 JS Bin 会 为 代码 自动 添加 行 号 。 这 
些 行 号 并 不 是 程序 的 必要 组 成 部 分 ， 只 是 在 编写 和 测试 代码 时 能 够 为 开发 者 提供 帮助 。 如 
图 1-5 所 示 ， 在 一 个 比较 长 的 程序 中 存在 两 个 错误 。 读 者 暂时 不 必 理 解 该 代码 ， 只 需要 尝试 


表 中 找到 这 两 个 错误 。 如 果 程 序 变 得 更 长 又 没有 行 号 ， 程 序 员 将 很 难 找到 


错误 的 具体 位 置 。 


在 JavaScript 面板 左上 角 有 一 个 单词 JavaScript ( 见 图 1-5)， 可 以 用 来 切换 是 否 在 JS Bin 


上 显示 行 号 。 双 击 


它 可 以 打开 或 关闭 一 个 菜单 ， 同 时 也 会 使 行 号 由 出 现 切换 到 隐藏 ， 或 者 由 


隐藏 切换 到 出 现 。 如 果 你 是 JS Bin 的 注册 用 户 ， 可 以 在 JS Bin profile 中 将 行 号 设置 为 开启 或 


1.4.8 ”获取 账户 


双击 来 切换 行 号 


ODe@ ‘< 加 加 jsbin.com © 由 
- JS Bin- JS Bin a ee 国 
国 |Fie- Addibray Snare | HIML CSS JavaScript Console | Output LoginorRegister Blog Help 


1 var log = fun 
2 console. log(p' 
3 


© Une 5: Expocted ”and nstead saw ™,. 
四 Line 9: Missing semicolon. 


Bin info 
Just now 


图 1-5 ”对 查找 错误 有 帮助 的 代码 行 号 


在 JS Bin 上 注册 一 个 免费 的 账户 是 很 有 价值 的 。 注 册 账 户 后 ， 你 可 以 保存 自己 的 程序 ， 
还 可 以 有 更 多 的 个 性 化 设置 。 当 用 户 开始 自己 写 程序 时 ， 就 会 发 现 JS Bin 是 一 个 可 以 大 胆 尝 


试 新 想法 ， 并 得 到 


即时 预览 和 反馈 的 绝妙 之 地 。 


1.5 游戏 The Crypt 一 一 本 书 的 一 个 持续 示例 


本 书 从 始 至 终 
中 ， 玩 家 将 在 地 图 
和 跨越 障碍 的 有 
善 。 读 者 可 以 看 到 


一 直 在 持续 开发 一 个 名 为 The Crypt 的 基于 文本 的 冒险 游戏 。 在 这 个 游戏 
上 进行 探索 ， 从 一 个 地 方 移动 到 另 一 个 地 方 ， 得 到 能 够 帮助 他 们 解决 问题 


物品 。 在 每 章 的 最 后 一 节 ， 会 使 用 刚 学 到 的 新 内 容 对 该 游戏 进行 更 新 和 完 


如 何 使 用 每 章 的 编程 知识 来 编写 小 程序 ， 然 后 再 将 这 些小 程序 组 合生 成 一 
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个 大 程序 。 


1.5.1 运行 The Crypt 


游戏 将 显示 玩家 的 当前 位 置 ， 以 及 在 此 地 的 所 有 物品 〈Items) 和 所 有 出 口 (Exits)， 如 
1-6 所 示 。 


页 


The Kitchen 


You are in a kitchen. There is a disturbing smell. 


**w* A Zombie sinks its teeth into your neck. *** 


use holy water south| 


图 1-6 The Crypt 游戏 界面 


玩家 可 以 输入 命令 ， 从 一 个 地 方 移动 到 另 一 个 地 方 ， 得 到 他 们 发 现 的 物品 ， 并 使 用 这 些 
物品 来 迎接 挑战 。 

开发 者 需要 为 游戏 中 的 所 有 元 素 编写 代码 。 不 过 不 要 担心 ， 本 书 会 一 步 一 步 地 教 你 如 何 
去 做 。 请 在 JS Bin 上 运行 该 游戏 : http://output.jsbin.com/yapiyic。 


1.5.2 创建 The Crypt 的 具体 步 又 


在 本 书 的 第 一 部 分 ， 我 们 已 经 学 习 了 JavaScript 的 一 些 核心 概念 ， 现 在 可 以 编写 代码 为 
游戏 中 的 玩家 (Players) 和 地 点 〈Places) 命名 ， 并 可 以 让 玩家 在 地 点 之 间 移 动 ， 以 放置 和 
拾取 他 们 发 现 的 物品 。 图 1-7 显示 了 该 游戏 需要 创建 的 元 素 : 玩家 、 地 点 、 地 图 (Maps) 和 
动作 (Game)。 请 读者 不 必 担 心 图 中 的 术语 ， 在 本 书 的 后 续 章 节 中 会 对 其 进行 详细 介绍 。 


Players Places Maps 
player variables place objects linking places via exits 
a player object place items Game 
showing player info place exits render 
player items showing place info get 
Player Constructor Place Constructor go 


图 1-7 The Crypt 在 第 一 部 分 中 的 游戏 元 素 
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以 下 每 一 章 都 会 有 一 个 与 上 图 类 似 的 游戏 元 素 图 。 


上 的 控制 台 来 显示 游戏 信息 ， 


第 1 章 


全 .六 
第 一 音 


编程 、JavaScript 和 JS Bin 


分 和 第 二 部 分 都 将 使 用 JS Bin 
并 接受 用 户 的 输入 。 表 1-1 显示 了 游戏 元 素 与 第 一 部 分 内 容 的 


对 应 关系 。 
表 1-1 The Crypt 的 游戏 元 素 和 第 一 部 分 中 与 之 对 应 的 JavaScript 
游戏 元 素 任 务 JavaScript 章 车 
确定 我 们 所 需要 的 每 位 玩家 的 信息 变量 (Variables) 第 2 章 
收集 在 某 一 个 地 点 中 玩家 的 信息 对 象 (Objects) 第 3 章 
玩家 (Players ) 在 控制 台 上 显示 玩家 的 信息 函数 (Functions) 第 4~7 章 
创建 每 个 玩家 收集 到 的 物品 列表 数组 (Arrays) 第 8 章 
组 织 创 建 玩家 的 代码 构造 函数 (Constructors) 第 9 章 
创建 结构 类 似 的 探索 地 点 构造 函数 〈Constructors) 第 9 章 
地 点 (Places) 
连接 地 点 与 出 方 括号 运算 符 〈Square bracket notation) 第 10 章 
动作 (Gane) | 电 深 个 国 的 区 月 移动、 收集 物品 入 括 号 运算 符 (Square bracketnotation) 第 10 章 
地 图 (Maps) 连接 地 点 与 出 方 括号 运算 符 〈Square bracket notation ) 第 10 章 
本 书 第 二 部 分 为 玩家 增加 了 挑战 ， 在 玩家 使 用 合适 的 物品 解 出 谜 题 之 前 ， 无 法 打开 出 
口 。 第 二 部 分 编程 的 重点 集中 在 以 下 几 个 方面 : 代码 的 组 织 、 程 序 的 部 分 隐藏 、 用 户 输入 的 


检查 以 及 能 够 增加 项 目 灵 活性 的 可 重复 使 用 和 替换 的 模块 。 


图 1-8 显示 如 
在 控制 台 上 显示 信息 的 视图 以 及 月 
读者 不 需 理解 图 表 中 的 所 有 术语 ， 只 要 保持 好 奇 和 兴 奉 前 


可 将 该 游戏 拆 分 为 地 多 


数据 和 用 于 创建 玩家 和 地 点 的 构造 函数 模块 、 用 于 


日 于 运行 游戏 并 链接 所 有 程序 块 的 控制 器 。 
好 ! 所 有 上 述 概念 将 在 本 书 的 后 续 


再 次 指出 ， 目 前 


章节 中 详细 叙述 。 
Utility 
Views 
Se Model Constructors 
全 人 Controller 
Map Player 
placeView Controller 
Map data Place 
messageView 
Map builder 
图 1-8 第 三 部 分 中 的 The Crypt 游戏 元 素 
本 书 第 三 部 分 讲解 如 何 使 用 HTML 模板 更 新 该 游戏 ， 如 何在 游戏 运行 中 加 载 数据 ， 如 
何 使 用 玩家 和 地 点 信息 填充 模板 ， 以 及 如 何 使 用 文本 框 和 按钮 让 玩家 能 通过 网 页 输入 命令 ， 
如 图 1-9 所 示 。 
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Map 
Views 
和 Model Constructors Controller 
playerView 
Utilities - gpwj Player Controller 
placeView 
Templates Place Commands 


messageView 


Bin Data 


图 1-9 第 三 部 分 中 的 The Crypt 游戏 元 素 


1.6 更 多 示例 和 练习 


尽管 游戏 The Crypt 是 我 们 持续 学 习 JavaScript 的 程序 背景 ， 但 是 在 本 书 的 每 一 章 也 包 
括 了 许多 其 他 示例 ， 帮 助 读者 掌握 所 学 基本 概念 在 各 种 情况 下 的 运用 。 伴 随 着 学 习 的 一 步 步 
深入 ， 也 会 逐渐 开发 一 些 其 他 程序 示例 ， 以 帮助 读者 理解 新 概念 如 何 优化 和 改进 程序 。 在 后 
续 章 节 中 ， 我 们 会 看 到 一 个 测验 应 用 程序 、 一 个 健身 记录 应 用 程序 、 一 个 电影 评分 网 页 和 一 
个 新 闻 标 题 网 页 。 


1.7 浏览 器 的 兼容 性 


浏览 器 一 直 处 在 不 断 升 级 中 ， 低 版 本 的 浏览 器 (如 Internet Explorer 8 和 其 他 更 老 的 浏览 
器 ) 可 能 不 支持 本 书 中 的 某 些 JavaScript 代码 。 在 本 书 的 在 线 论坛 中 ， 可 以 找到 上 述 问 题 的 
解决 方案 。 


1.8 本章 小 结 


图 程序 是 一 组 计算 机 遵循 的 指令 集合 。 

图 高 级 语言 让 我 们 写 出 更 容易 阅读 和 理解 的 指令 。 

加 作为 世界 上 最 广泛 使 用 的 编程 语言 之 一 ，JavaScript 为 网 页 增加 了 很 强 的 交互 性 。 作 
为 应 用 程序 的 脚本 语言 ，JavaScript 也 可 用 于 服务 器 端 编 程 、 机 器 人 编程 和 其 他 设备 
编程 。 

图 任何 学 习 过 程 都 遵循 思维 规律 ， 循 序 渐 进 才 能 取得 进步 。 请 读者 认真 练习 本 书 的 示 
例 ， 并 保持 好 奇 心 ， 深 入 挖掘 ， 百 折 不 挠 。 

图 JS Bin 是 一 个 在 线 代码 沙 盒 ， 将 帮助 读者 聚焦 于 JavaScript 语言 ， 在 进行 代码 实验 和 
练习 过 程 中 为 其 提供 快速 反馈 。 

国 本 书 的 主要 持续 示例 是 The Crypt。 该 游戏 为 读者 学 习 编 程 概念 提供 了 程序 环境 ， 并 
且 示 范 了 如 何 从 简单 元 素 起 步 ， 逐 渐 编 号 出 一 个 相对 复杂 的 程序 。 

国 其 他 更 多 示例 将 拓展 读者 编程 的 广度 和 深度 ， 并 有 助 于 读者 看 到 自己 所 学 到 的 编程 

知识 可 以 应 用 到 更 广泛 的 领域 。 


第 2 音 变量 : 在 程序 中 存储 数据 


本 章 内 容 包括 ; 
图 用 变量 存储 和 使 用 信息 
声明 变量 

图 为 变量 分 配 值 

国 在 控制 台 上 显示 变量 值 


《JavaScript 开发 实战 》 是 一 本 介绍 编程 的 入 门 书 ， 本 章 可 以 看 作 是 这 本 入 门 书 的 起 点 。 
干 里 之 行 始 于 足下 ， 冒 险 之 旅 不 能 弃 家 不 谈 ， 因 为 家 是 你 收拾 行 圳 、 开 启 冒险 之 旅 的 起 点 ， 
它 虽 然 不 是 冒险 的 主要 内 容 ， 但 至 关 重 要 ， 就 好 像 去 机 场 不 能 忘记 带 护 照 ， 去 参加 奥斯卡 颁 
奖 典礼 不 能 态 记 拿 自 拍 杆 一 样 。 

无 一 例外 ， 程 序 存储 、 操 作 和 显示 的 对 和 象 是 数据 。 无 论 是 编写 博客 系统 、 分 析 发 动机 性 
能 、 预 测 天 气 还 是 设计 10 年 以 后 要 发 送 到 彗星 上 着 陆 的 探测 器 ， 都 需要 考虑 所 需 使 用 的 数 
据 以 及 数据 可 能 采用 的 类 型 。 要 在 程序 中 使 用 数据 ， 就 必须 使 用 变量 。 


2.1 什么 是 变量 


在 程序 中 ， 变 量 (variable) 就 是 被 命名 的 值 。 当 程序 员 在 程序 中 使 用 该 名 称 时 ， 会 被 
替换 为 值 。 例 如 ， 程 序 中 创建 了 一 个 名 为 score 的 变量 ， 并 对 其 赋值 100。 之 后 ， 如 果 给 计 
算 机 发 送 指令 “显示 score” 计算 机 就 会 显示 100。 因 为 变量 是 可 以 变化 的 ， 所 以 在 后 面 的 
程序 中 ，score 变量 可 以 对 玩家 的 某 些 动作 做 出 响应 ， 并 随时 对 score 变量 的 值 进行 更 新 。 例 
如 ， 先 将 score 变量 的 值 增加 50， 然 后 让 计算 机 “显示 score”， 计 算 机 就 会 显示 150。 

如 何 使 用 JavaScript 来 实现 上 述 小 戏法 ? 


2.2 变量 的 声明 和 赋值 


为 了 让 计算 机 理解 所 存储 的 信息 ， 通 常 需要 以 下 两 个 步 又 : 

首先 ， 设 置 一 个 变量 名 称 ， 并 使 用 这 个 名 称 来 引用 程序 中 的 数据 ， 例 如 score、 
playerName 或 taxRate。 

然后 ， 在 变量 名 称 与 它 所 存储 的 值 之 间 建 立 起 连接 ， 例 如 设置 score 等 于 100、 设 置 玩 
家 名 字 是 George 或 者 将 税率 设置 为 12%。 

在 2.2.3 节 中 ， 我 们 将 学 习 如 何 使 用 一 条 JavaScript 语句 完成 以 上 两 个 步骤 。 但 是 现 
在 ， 我 们 先 来 学 习 如 何 使 用 两 条 语句 完成 以 上 两 个 步骤 。 


JavaScript 开发 实战 


2.2.1 变量 声明 


在 游戏 中 ， 我 们 常常 需要 记录 不 断 变化 的 得 分 ， 完 全 可 以 用 程序 来 追踪 这 些 变化 的 分 
数 ， 这 就 意味 着 需要 设置 一 个 变量 。 

变量 声明 就 是 用 一 个 名 称 来 表示 值 
下 代码 中 声明 了 一 个 名 为 score 的 变量 : 


全 。 代码 清单 2-1 声明 变量 
(http://jsbin.com/potazo/edit?js,console) 


。 在 JavaScript 中 ， 使 用 关键 字 var 来 声明 变量 。 以 


Var score; 


关键 字 var 命令 计算 机 从 该 语句 中 取出 下 一 个 单词 ， 
代码 清单 2-1 各 部 分 的 详解 。 


并 将 其 变 成 一 个 变量 。 图 2-1 是 对 


关键 字 var 


Var score; 分 号 结 


自己 选择 的 变量 名 
图 2-1 声明 变量 


2-1 显示 了 变量 声明 语句 中 各 部 分 的 名 称 。 就 这 样 ， 我 们 成 功 地 声明 了 一 个 名 为 
SCOTe 的 变量 。 


2.2.2 ”变量 赋值 


现在 ， 程 序 已 经 能 够 识别 变量 score， 下 面 介 乡 


如 何 为 变量 score 分 配 一 个 值 。 为 变量 赋 


值 需要 使 用 等 号 。 图 2-2 说 明了 等 号 的 作用 ， 代 码 清单 2-2 显示 了 等 号 在 程序 中 的 作用 。 
赋值 运算 符 
Score = 100; 用 分 号 结尾 
变量 名 值 


图 2-2 为 变量 赋值 


和 代码 清单 -2 为 变量 赋值 
(http://jsbin.com/yuvoju/edit?js,console) 


var score; // 声 明 一 个 名 为 score 的 变量 
score = 100; // 将 100 赋值 给 score 


唱 


Ne 


通过 以 上 两 条 语句 ， 我 们 将 100 赋值 给 变量 score。 在 赋值 语句 中 ， 将 值 
右边 ， 将 变量 放 在 等 号 的 左边 (图 2-3)。 当 使 用 等 号 为 变量 赋 


二 宁 人 人 
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放 在 等 号 的 
值 时 ， 将 等 号 称 作 赋值 运 


区 


现在 ， 我 们 已 经 学 会 了 声明 一 个 变量 并 对 其 进行 赋值 。 下 面 介 
上 。 以 上 代码 清单 2-2 的 输出 如 下 所 示 : 


控制 台 


> 100 


代码 清单 2-3 ”使 用 变量 


var score; 
100; 


console.log(score); 


SCore = 


利用 第 1 章 中 介绍 的 console.log 函数 ， 可 以 在 控制 台 


将 值 放 在 等 号 的 右边 ， 
将 变量 放 在 等 号 的 左边 


变量 名 值 


2-3 ”等 号 称 作 赋值 运算 符 


: 在 程序 中 存储 数据 


AN31 


(http://jsbin.com/huvime/edit?js,console) 


已 经 将 100 赋值 给 了 score， 所 以 寿 


FE 控制 台 


上 就 会 显示 100。 


为 什么 不 直 


接 使 用 console.log(100) 来 显示 100? 因为 在 程序 运行 ! 


如 何 将 变量 的 值 显示 在 


上 显示 变量 score 的 值 。 


因为 我 们 


变化 的 。 通 过 使 用 变量 ， 而 不 是 字面 值 ， 程 序 可 以 随时 取 到 这 个 变量 中 存放 的 值 。 


变量 的 值 通常 是 不 断 
以 下 代码 


清单 2-4 首先 在 控制 台 上 显示 score 变量 中 存放 的 值 ， 然 后 更 改 score 变量 的 值 ， 并 显示 更 改 


后 的 新 值 ， 输 出 结果 如 下 : 


> 100 
> 150 


代码 清单 2-4 


VAar BCOLre}y 


score = 100; 
console.log(score); 
score = 150;) 


console.log(score); 


在 以 上 代码 中 ， 两 次 使 用 相同 的 指令 : 
不 同 的 值 。 尽 管 代 码 指令 ， 
化 ， 因 此 输出 也 会 相应 改变 。 


使 用 了 相同 的 变量 


变量 的 值 发 生变 化 
(http://isbin.com/jasafa/edit?js,console) 


score， 但 因为 变量 


console.log(score)， 但 是 在 控制 台 上 输出 了 两 个 
score 的 值 前 后 发 生 了 变 


在 以 上 代码 中 ， 程 序 分 两 次 将 100 和 150 赋值 给 变量 score。 与 之 类 似 ， 程 序 指令 也 可 


以 轻松 地 将 文本 内 容 赋 值 给 变量 ， 只 需 将 文本 内 容 放 在 引号 ! 


即 可 。 以 


下 代码 清单 2-5 可 以 
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在 控制 台 上 显示 以 下 两 条 信息 : 


> Hello World! 


> Congratulations! Your tweet has won a prize ... 


代码 清单 2-5 ”将 文本 赋值 给 变量 
(http://jsbin.com/hobiqo/edit?js,console) 


var message; // 声 明 变 量 message 
message = "Hello World!"; // 使 用 双 引 号 将 一 条 文本 信息 赋值 给 变量 message 


console.log (message); 


message = 'Congratulations! Your tweet has won a prize. ' 


1 


/ /合用 单 引号 将 一 条 新 的 文本 信息 赋值 给 变量 message 


console.log (message); 


正如 代码 清单 2-5 所 示 ， 将 文本 放 在 引号 内 就 称 为 一 个 字符 串 。 我 们 可 以 使 用 双 引 号 ， 
例如 "Hello World!"; 或 者 使 用 单 引 号 ， 例 如 'Congratulations!'。 但 是 单 引 号 或 双 引 号 必须 成 对 
出 现 。 如 果 没 有 使 用 引号 ，JavaScript 会 将 文本 信息 解释 为 指令 或 变量 。 
2.2.3 了 

在 以 上 两 节 中 ， 读 者 已 经 学 会 先 声 明 变 量 ， 然 后 再 为 变量 赋值 。 下 面 ， 讲 述 如 何在 一 条 
语句 中 既 声 明 一 个 变量 又 为 其 赋值， 如 图 2-4 所 示 。 


声明 变 


地 


San seonee 00 


变量 赋值 
图 2-4 在 一 条 语句 中 声明 一 个 变量 并 为 其 赋值 


代码 清单 2-6 和 2-7 实现 了 以 下 完全 相同 的 结果 : 声明 变量 、 为 变量 赋值 ， 然 后 显示 以 
下 消 县 3 


> Kandra is in The Dungeon of Doom 
二 代码 清 单 2-6 分 两 步 实现 先 声明 变量 ， 然 后 再 为 变量 赋值 
I (http://jsbin.com/vegoja/edit?js,console) 


var playerName; 


var locationName; 


playerName = "Kandra"; 
locationName = "The Dungeon of Doom"; 
console.log(playerName + " is in " + locationName); // 使 用 加 号 来 连接 字符 串 


会 党 ”代码 清单 2-7 一 步 实 现 变量 声明 和 赋值 
WE (http:/jsbin.com/dorane/edit2js,console) 


pa 


Var playerName = "Kandra'"; // 一 步 实 丽 


见 变量 声明 和 赋值 
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var locationName = "The Dungeon of Doom"; // 一 步 实 现 变 量 声明 和 赋值 
console.log(playerName + " is in " + locationName); 


在 代码 清单 2-7 中 ， 程 序 将 每 个 等 号 右 侧 的 值 赋 给 等 号 左 侧 那 个 新 声明 的 变量 。 在 这 两 
个 程序 中 ， 通 过 使 用 加 号 连接 多 段 文本 并 把 它们 显示 在 控制 台 上 。 将 多 段 文 本 连接 在 一 起 称 
作 “ 字 符 串 连接 ”加 号 称 作 “字符 串 连接 运算 符 ”。 

如 果 在 声明 变量 时 就 已 经 知道 它 的 值 ， 就 可 以 采用 一 步 实现 变量 声明 和 赋值 的 便捷 方 
式 。 有 时 ， 在 声明 变量 时 并 不 知道 它 的 值 ， 可 能 需要 经 过 计算 、 需 要 用 户 输入 或 者 需要 等 待 
网 络 响应 。 在 这 些 情况 下 ， 声 明 变 量 和 赋值 就 要 分 开 进 行 。 通 常 ， 程 序 员 习惯 在 程序 开始 处 
就 声明 变量 ， 即 使 他 们 后 来 并 不 会 为 其 赋值 。 


2.2.4” 先 运算 再 赋值 
在 为 变量 赋值 时 ，JavaScript 先 计算 赋值 运算 符 右边 的 表达 式 ， 再 将 计算 结果 赋值 给 访 


o 


一 人 


变 


tl 


Var score; 
score = 100 + 50; 


JavaScript 先 计算 表达 式 : 100 + 50， 然 后 将 结果 150 赋值 给 变量 score。 
表达 式 中 的 值 有 可 能 不 是 诸如 100 和 50 这 样 的 硬 编码 字符 串 ， 而 是 变量 。 在 下 面 的 例子 
中 ， 使 用 变量 callOutCharge，costPerHour 和 numberOfHours 来 计算 雇用 水 管 工 的 总 成 本 : 


total = callOutCharge + costPerHour * numberOfHours; 


* 符号 用 于 乘法 ， 称 作 乘 法 运算 符 。 当然 ， 我 们 也 可 以 使 用 - “用 于 减法 ) 和 / (用 
于 除法 )。 
因为 JavaScript 首先 计算 赋值 运算 符 右边 的 表达 式 的 值 ， 然 后 再 将 计算 结果 赋值 给 左边 
的 变量 ， 因 此 可 以 使 用 变量 的 当前 值 来 设置 其 新 的 值 。 例 如 在 游戏 应 用 程序 The Fruitinator 
〈 切 水 果 ) 中 ， 玩 家 每 切中 一 个 草莓 就 可 以 得 到 50 分 ! 玩家 需要 不 断 地 更 新 得 分 。 


> Your Score was 100 
> Great splat!!! 
> New Score: 150 


> Way to go! 


图 2-5 显示 了 一 条 使 用 变量 的 当前 值 来 设置 其 更 新 的 值 的 语句 ， 代 码 清 单 2-8 是 一 个 对 
得 分 进行 更 新 的 程序 。 


将 结果 赋值 给 score， 
以 更 新 score 的 值 


Score = Score 4 120: 


使 用 变量 score 的 当前 值 来 计算 
图 2-5 用 包含 变量 本 身 的 计算 结果 来 更 新 变量 的 值 
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人 代码 清单 2-8 使 用 变量 的 当前 值 来 设置 其 更 新 值 
(http://jsbin.com/kijuce/edit?js,console) 


Var score; 
score = 100 


console.log("Your Score was " + score); 

console.log("Great splat!!!"); 

score = score + 50; // 将 当前 score 加 50， 然 后 将 计算 结果 赋值 给 变量 
console.log("New score: " + Score) ; 


console.log('"Way to go!"); 


在 以 上 代码 中 ， 首 先 使 用 score 的 当前 值 100， 用 表达 式 score + 50 计算 出 结果 是 150， 


然后 将 150 赋值 给 变量 score。 


2.3 ”选择 合适 的 变量 名 


在 上 述 所 有 的 代码 清单 中 ， 并 无 意 强迫 编程 者 必须 使 用 上 述 这 些 变 量 名 ,但 是 确实 应 该 
尽量 选择 一 些 让 读者 容易 理解 的 变量 名 。 编 程 者 基本 上 可 以 自由 选择 变量 名 ， 但 是 必须 避免 


JavaScript 内 部 已 经 使 用 的 关键 字 和 保留 字 。 


2.3.1 关键 宇和 保留 字 


JavaScript 有 一 些 关 键 字 ， 例 如 var 和 function。 关 键 字 是 JavaScript 语言 本 身 的 一 部 
分 ， 管 理 每 个 程序 中 的 操作 和 属性 。JavaScript 也 设置 了 一 些 保留 字 ， 它 们 将 来 可 能 会 成 为 
JavaScript 语言 的 关键 字 。 我 们 不 能 使 用 这 些 关键 字 或 保留 字 作 为 变量 的 名 称 。 其 他 关键 字 


有 认 switch、do 和 yield 等 ，Mozilla Developer Network 上 公布 了 完整 清单 供 学 习 者 查询 


(http://mng.bz/28d9)。 读 者 可 以 不 接受 我 的 忠告 ,到 JS Bin 上 尝试 使 用 清单 中 的 关键 字 作 为 


变量 名 称 ， 那 么 就 会 看 到 如 图 2-6 所 示 的 信息 。 


© BB < 癌 四 jsbin.com © | 器 
JS Bin - Collaborative JavaScript Debugging 
8 pn 
国 Fiev Addlibrary Share HTML CSS JavaScript Console QOutput 四 Account Blog Help 
Console Run Clear 
1 var function = 16; X "SyntaxError: Cannot use the keyword 
'function' as a variable name. (Line 1)" 
》 
v ©@1ermror 
四 Line 1: Expected an identifier and instead saw 'function' (a 
reserved word). 
Bin info 


just now 


图 2-6 在 JavaScript 中 有 一 些 词 不 能 用 作 变 量 名 
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读者 不 必 完 全 知晓 关键 字 和 保留 字 的 请 单 。 随 
关键 字 ， 而 且 当 你 尝试 使 用 它们 作 变 量 名 时 ， 通 常 
你 又 找 不 到 原因 时 ， 就 有 必要 考虑 这 个 因素 。 
2.3.2 ”变量 的 命名 规则 

在 上 一 节 中 ， 我 们 知晓 不 能 采用 关键 字 和 保留 字 作为 变量 名 ， 是 否 意味 着 其 他 词 都 可 以 
作 变 量 名 ? 不 完全 是 。 关 于 变量 的 命名 还 有 一 些 其 他 规则 。 变量 名 的 第 一 个 字符 可 以 是 任 
字母 、 美 元 符号 “$” 或 下 画 线 “″ ”。 变量 名 的 后 续 字 符 可 以 是 以 上 任何 一 个 字符 或 数字 。 
是 不 允许 空格 。 代 码 清单 2-9 中 包括 一 个 有 效 变量 名 和 一 个 无 效 变量 名 。 如 果 访 问 JS Bin 上 | 
代码 ， 将 会 看 到 一 长 串 错误 报告 。 请 读者 尝试 阅读 并 理解 清楚 这 些 错误 报告 。 如 果 确 实 无 法 理 
解 也 不 必 担 心 ， 因 为 该 代码 清单 中 包括 了 许多 无 效 的 变量 名 ，JavaScript 对 此 很 不 高 兴 。 


3 代码 清单 2-9 有 效 的 变量 名 和 无 效 的 变量 名 
Oe (http://jsbin.com/biqawu/edit?js,console) 


着 编程 经 历 的 增长 ， 你 自然 会 知道 哪些 是 
会 有 错误 提示 。 如 果 你 的 程序 无 法 运行 ， 


安 人 本 习 : 


var thisIsFine; 

Var SnoPproblemHere; 

var underscore56; 

var StartWithCapital; 

var 25; // 以 上 是 有 效 的 变量 名 
var 999; // 以 下 是 无 效 的 变量 名 


var 39Steps; 


var &nope; 
var single words only; 


var yield; 


JavaScript 区 分 大 小 写字 母 。 更 改变 量 名 中 的 大 小 写字 母 就 意味 着 一 个 新 的 变量 ， 例 如 
score、Score 和 SCORE 是 三 个 不 同 的 变量 名 。 以 上 这 些 差异 有 时 候 很 难 发 现 ， 所 以 需要 尽 
量 保持 一 致 ， 详 见 以 下 2.3.3 节 的 内 容 。 


2.3.3 ”骆驼 式 命名 法 (camelCase ) 


仔细 观察 camelCase 中 大 写字 母 的 使 用 位 置 。 与 之 类 似 ， 很 多 变量 名 (例如 
costPerHour、playerName 和 selfieStickActivated) 都 是 由 多 个 词 连 接 在 一 起 构成 的 ， 其 中 第 
一 个 词 是 小 写字 母 ， 后 续 的 词 以 大 写字 母 开 头 ， 这 种 命名 方式 称 为 骆驼 式 命名 ， 又 称 驼 峰 命 
名 法 。 这 种 命名 法 更 易于 程序 员 在 同行 之 间 交 流 代码 ， 因 而 被 广泛 使 用 。 

有 些 程序 员 愿 意 使 用 下 画 线 来 分 隔 变量 名 中 的 各 个 单词 ， 例 如 cost_per_hour、 
player name 和 selfie_stick_activated。 其 实 ， 如 何 为 变量 命名 完全 取决 于 程序 员 自 己 ， 属 于 
个 人 编程 的 风格 。 本 书 采用 骆驼 命名 法 。 


2.3.4 使 用 描述 性 变量 名 


我 们 可 以 使 用 描述 用 途 或 描述 目的 的 词 为 变量 命名 。 虽 然 编程 者 确实 可 以 自由 选择 变量 
名 ， 但 是 很 显然 costPerHour 比 cph 更 易于 理解 。 其 他 程序 员 将 来 有 可 能 需要 读 取 和 更 新 你 
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的 代码 ， 你 自己 将 来 也 可 能 会 再 读 自己 的 代码 ， 那 时 候 ， 你 就 会 感谢 你 自己 曾经 使 用 了 这 些 
容易 理解 的 变量 名 。 随 着 程序 越 来 越 长 ， 就 会 涉及 越 来 越 多 的 变量 、 对 象 和 函数 ， 合 适 的 变 
量 名 有 助 于 开发 者 追踪 程序 的 流程 并 理解 其 目的 。 所 以 ， 为 变量 命名 时 要 尽量 做 到 简单 、 直 


接 和 易 读 。 


现在 ， 读 者 已 经 理解 了 变量 的 概念 ， 并 学 会 了 如 何 声 明和 赋值 变量 ， 


题 ， 然后， 规划 一 个 适合 用 户 的 解决 方案 。 在 下 一 节 


表 玩 家 的 各 种 信息 。 


2.4 The Crypt 一 一 玩家 变量 


还 明白 了 如 何 为 变 
量 选 取 一 个 合适 的 名 称 。 下 一 步 ， 读 者 需要 了 解 如 何在 程序 中 确定 变量 。 首 先 ， 需 要 分 析 问 


P， 我 们 需要 考虑 游戏 The Crypt 中 代 


在 第 1 章 中 ， 我 们 已 经 知道 游戏 The Crypt 中 包括 许多 元 素 : 玩家 (Players)、 地 点 
(Places)、 动 作 (Games)、 地 图 (Maps) 和 挑战 〈Challenges)。 在 设计 和 构建 游戏 时 ， 就 需 


要 考虑 所 有 这 些 元 素 的 属性 。 如 图 2-7 所 示 ， 突 出 显示 了 玩家 变量 


Players Places Maps 
player variables place objects linking places via exits 
a player object place items Game 
showing player info place exits render 
player items showing place info get 
Player Constructor Place Constructor go 


o 


图 2-7 游戏 The Crypt 中 包括 的 元 素 


随 着 玩家 从 一 个 地 点 移动 到 男 一 个 地 点 ， 程 序 需要 知道 创建 些 什 么 内 容 才能 使 冒险 既 有 


趣 又 富 挑战 性 。 我 们 可 能 想 要 跟踪 姓名 、 健 康 、 携 带 的 物品 或 位 置 ， 或 者 也 可 能 想 要 跟踪 一 


下 玩家 脚 上 的 毛 和 激光 剑 的 颜色 。 这 些 信息 中 有 一 些 内 容 可 能 刀 


有 一 些 可 能 会 变化 。 


E 游 戏 中 一 直 保 持 不 变 ， 但 是 


编程 技艺 之 美 来 源 于 懂得 取舍 ， 知 道 程序 应 该 包括 哪些 信息 ， 又 应 该 剔除 哪些 信息 。 例 


如 玩家 的 脚 上 到 底 有 多 少 根 毛 也 许 会 对 游戏 产生 一 些 影响 ， 但 是 我 们 对 此 无 法 知晓 。 游 戏 的 


发 者 应 该 仔细 考虑 玩家 在 完成 任务 时 ， 应 该 使 用 什么 数据 。 


表 2-1 显示 了 每 一 个 玩家 身上 可 能 会 拥有 的 属性 。 


表 2-1 玩家 可 能 会 拥有 的 属性 


届 性 描 述 示 范 值 
名 字 于 显示 玩家 的 信息 ， 用 于 与 其 他 玩家 交互 时 使 "Kandra", "Dax" 
健康 对 怪物 和 毒物 而 减少 ， 因 食物 和 药品 而 增加 68 
地 点 玩家 在 地 图 上 的 哪个 地 点 ? "The Old Library" 
脚 毛 衡量 玩家 赤脚 在 寒冷 环境 中 应 对 水 平 的 高 低 94 
物品 跟踪 玩家 已 经 得 到 的 物品 "A rusty key", "A purple potion", "Cheese" 
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游戏 可 能 还 需要 其 他 属性 ， 那 么 就 根据 需要 添加 和 删除 属性 即 可 。 以 下 是 对 玩家 属性 的 
声明 : 

Var playerName = "Kandra'"; 

Var playerHealth = 50; 
程序 员 的 专业 素养 体现 在 能 够 针对 具体 情况 建立 程序 模型 ， 并 预测 需要 哪些 变量 来 完成 
一 个 程序 。 预 测 得 越 好 ， 将 来 大 面积 重 写 程序 的 概率 就 会 越 小 一 一 没有 人 愿意 这 么 做 ， 正 如 
没有 人 愿意 到 了 飞机 场 才 发 现 自己 忘记 带 护照 了 ， 同 样 没有 人 愿意 在 已 经 写 了 很 多 代码 之 后 
才 发 现 自己 忽略 了 一 个 重要 部 分 。 


2.5 ”本章 小 结 


本 量 可 以 让 程序 在 运行 中 存储 数据 。 
过 在 关键 字 var 之 后 加 一 个 名 称 的 方法 来 声明 变量 : 


var costPerHour; 


国 为 变量 选择 简单 并 且 合 适 的 名 称 ， 避 免 使 用 JavaScript 的 关键 字 和 保留 字 。 25 
国 使 用 赋值 运算 符 (=) 为 变量 赋值: 


CostPerHour = 40; 


该 语句 将 等 号 右边 的 值 赋 给 等 号 左边 的 变量 。 
图 在 表达 式 中 使 用 变量 : 


total = callOutCharge + costPerHour * numberOfHours; 


国 作为 程序 规划 设计 的 一 部 分 ， 需 要 认真 思考 声明 什么 变量 ， 以 及 这 些 变 量 将 拥有 什 
么 类 型 的 数据 。 | 26 | 
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本 章 内 容 包 括 : 


3 革 


对 象 : 数据 分 组 


图 使 用 JavaScript 对 象 组 织 信息 


图 创建 对 象 

图 为 对 象 添加 属性 

图 使 用 圆 点 运算 符 访问 属性 
图 对 象 的 示例 


在 第 2 章 ! 


在 生活 中 ， 我 们 常 
救 包 为 例 ， 急 救 包 内 装 了 很 多 物 
待 。 他 们 会 说 “你 带好 急救 包 了 1 
当 他 们 真正 需要 急救 包 内 的 物品 


， 我 们 学 习 了 如 何 声明 变量 ， 以 及 如 
] 变 量 为 玩家 建 模 。 随 着 程序 越 来 越 长 ， 使 月 
法 来 组 织 这 些 数据 ， 使 程序 更 加 容易 理解 、 
常 对 诸多 物品 进行 


包 里 的 消毒 剂 和 绷 市 递 给 我 。” 在 上 述 例子 中 ， 


可 为 变量 赋值 。 在 游戏 The Crypt 中 ， 使 
变量 的 数量 自然 也 会 越 来 越 多 ， 因 此 需要 一 些 方 
容易 更 新 并 且 将 来 更 加 易于 移植 到 其 他 程序 中 去 。 

分 组 ， 然 后 把 每 组 物品 作为 一 个 整体 来 看 待 。 以 急 
品 ， 但 是 ， 医 护 人 员 通 常 都 会 把 急救 包 作为 一 个 整体 来 对 
双 ?”“ 把 急救 包 给 我 。 “我 们 需要 一 个 急救 包 ! 快 !” 只 有 
十 ， 才 会 把 关注 的 焦点 切换 到 急救 包 里 面 的 内 容 ， 例 如 “把 
人 们 使 用 急救 包 这 个 单个 对 象 封 装 了 许多 零 


碎 物 品 。 

本 章 将 介绍 JavaScript 语言 中 的 对 象 。 对 象 是 一 种 简单 、 有 效 的 收集 变量 的 方法 ， 在 程 
序 中 可 以 把 这 些 变量 看 作 一 个 组 ， 而 不 是 各 个 单独 的 变量 来 进行 信息 传递 。 
3.1 变量 需要 分 组 

你 陆 陆 续 续 买 了 很 多 冒险 故事 书 ， 现 在 ， 你 决定 编写 一 个 程序 来 管理 这 些 藏书 。 以 下 代 


码 清单 3-1 将 一 本 书 的 信息 


> The Hobbit by J. R. 
代码 清单 3-1 使 用 变 
加 加 


var bookTitle; 
Var bookAuthor; 
bookTitle = 


【显示 在 控 秆 


// 声 明 变 量 


"The Hobbit"; 


二 


台 上 ， 如 下 所 示 : 


R. Tolkien 〈《 霍 比特 人 》 作 者 : J. R. R. Tolkien) 


量 表示 一 本 书 
(http://jsbin.com/fucuxah/edit?js,console) 


// 对 变量 赋值 


bookAuthor = "J. R. R. Tolkien"; 


console.log(bookTitle + " by " + bookAuthor) ， 


// 用 变量 来 显示 此 书 的 信息 
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在 以 上 代码 中 ， 首 先 使 用 关键 字 var 来 声明 两 个 变量 : bookTitle 和 bookAuthor， 后 续 程 
序 中 将 使 用 这 两 个 变量 名 来 存储 和 访问 值 ， 然 后 将 字符 串 〈 文 本 〉 赋值 给 这 两 个 变量 ， 引 号 
内 的 字符 串 不 会 被 JavaScript 解释 为 关键 字 或 变量 名 ， 最后， 使 用 加 号 将 三 个 字符 串 连接 在 
一 起 并 将 其 显示 在 控制 台 上 。 
在 上 例 中 ， 使 用 两 个 变量 显示 了 一 本 书 的 信息 。 随 着 你 购买 的 书籍 越 来 越 多 ， 又 该 如 何 
为 这 些 书籍 声明 变量 ? 答案 是 为 每 个 变量 名 加 上 不 同 的 前 级 。 以 下 代码 清单 将 三 本 书 的 信息 
显示 在 控制 台 上 : 
> There are three books so far ... (目前 有 三 本 书 ) 
> The Hobbit by J. R. R. Tolkien(《 霍 比特 人 》 作 者 : J. R. R. Tolkien) 
> Northern Lights by Philip Pullman〈(《 北 极光 》 作 者 : Philip Pullman) 


> The Adventures of Tom Sawyer by Mark Twain (《 汤 姆 。 索 亚 历 险 记 》 作 者 : 
Mark Twain) 


E> 
部 代码 清单 3-2 使 用 前 缀 来 区 分 变量 名 


var booklTitle = "The Hobbit"; // 一 步 实现 变量 声明 和 变量 赋值 
Var booklAuthor = "J. R. R. Tolkien",; 

var book2Title = "Northern Lights"; 

var book2Author = "Philip Pullman"; 

Var book3Title = "The Adventures of Tom Sawyer"; 

var book3Author = "Mark Twain"; 


console.log("There are three books so far..."); 
console.log(booklTitle + " by " + booklAuthor); 
book2Title + " by " + book2Author); 

) 


book3Title + " by " + book3Author 


console.1log( 
( 六 


了 


console.1od 

以 上 方法 成 功 解决 了 三 本 书 的 问题 ， 应 该 说 这 种 方法 在 一 定数 量 范围 内 奏效 ， 但 是 随 着 书目 

的 数量 继续 增加 ， 以 及 每 一 本 书 所 包含 信息 量 的 继续 增加 ， 变 量 的 数目 会 大 得 惊人 ， 甚 至 会 失 
控 ! 因此 需要 使 用 单个 变量 将 一 本 书 的 所 有 信息 集合 起 来 ， 这 就 是 下 一 节 的 内 容 一 一 对 象 。 


3.2 创建 对 象 


对 象 bookl 就 像 急 救 包 一 样 ， 是 一 个 打包 件 ， 而 各 个 变量 booklTitle、booklAuthor、 
book1ISBN， 就 如 同 急 救 包 内 的 剪刀 、 消 毒剂 、 绷 带 、 谨 药 等 零散 件 。 显 而 易 见 ， 打 包 件 比 
零散 件 易于 处 理 。 因 此 ，JavaScript 为 我 们 提供 了 创建 对 象 的 能 力 ， 对 象 即 变量 组 。 下 面 ， 
我 们 看 一 个 完整 的 例子 ， 然 后 再 把 它 分 解 成 各 个 不 同 部 分 。 

代码 清单 3-3 显示 如 何 将 一 本 书 创建 为 一 个 对 象 ， 而 非 一 扒 零 散 变量 的 集合 。 图 3-1 显 
示 了 对 象 book 在 JS Bin 控制 台 上 的 输出 形式 。 


全 代码 清单 3-3 对 象 book 
Or (http://jsbin.com/funiyu/edit?js,console) 


var book; 
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book = { 
title : "The Hobbit", 
author : "J. R. R. Tolkien", 
published : 1937 

}3 


console.1log (book); 


加 Flev Addiibrary Share 


HTML CSS JavaScript Console Output DO Account Blog Help 


Console Run Clear 

var book; [object Object] { 
book = { author: "J. R. R. Tolkien", 

title ; "The Hobbit", published: 1937, 

author ; "J, R, R, Tolkien", title: "The Hobbit" 

published : 1937 ) 

7 上 
console. log(book); > 
图 3-1 在 JSBin 控制 台 上 输出 一 个 对 象 


在 JS Bin 上 运行 代码 清 生 


3-3， 控 制 台 在 显示 对 象 的 同时 ， 还 会 显示 该 对 象 的 所 有 属 


性 。 请 注意 ， 控 制 台 会 按照 字母 顺序 显示 属性 。 对 象 本 身 并 没有 为 各 个 属性 排序 ， 只 是 JS 
Bin 在 显示 时 对 各 个 属性 进行 了 排序 。 
下 面 将 详细 介绍 如 何 创建 对 象 以 及 各 种 运算 符号 的 含义 。 


3.2.1 创建 一 个 空 对 象 


在 第 2 间 中 我 们 看 到 ， 可 以 先 创建 一 个 变量 ， 在 后 续 程序 中 
值 可 能 来 源 于 用 户 输入 、 服 务 器 的 响应 、 传 感 器 的 读 取 。 同 理 ， 也 可 以 先 创建 


对 该 变量 进行 赋值 。 此 赋 
个 没有 属性 


的 对 象 ， 在 未 来 需要 的 时 候 


下 为 其 添加 属性 。 


用 花 括号 创建 一 个 对 象 ， 如 下 所 示 : 


-~ 
Co 


2 ”代码 清单 3-4 创建 一 个 空 对 象 
yy http://jsbin.com/funiyu/edit?js,console) 
var book; // 使 用 关键 字 var 声明 一 个 变量 
book = {}; // 用 人 花 括 号 创建 一 个 对 象 ， 并 将 其 赋值 给 该 变量 


上 述 代 码 创建 了 一 个 没有 任何 


的 对 象 是 毫 无 用 处 的 ， 在 3.4 节 


请 
点 


性 的 空 对 象 ， 并 将 其 赋值 给 变量 book。 没 有 任何 属性 


如 何 创建 一 个 具有 属性 的 对 象 。 
3.2.2 ”属性 “ 键 - 值 对 ” 


将 介绍 如 何 为 一 个 已 经 存在 的 对 象 添加 新 属性 。 下 面 介绍 


在 代码 清单 3-3 中 ， 书 籍 对 象 包含 三 个 属性 : 书籍 标题 、 书 籍 作者 、 书 籍 的 出 版 年 份 。 


这 些 属 性 的 值 分 别 是 “The Hobbit 
们 把 属性 的 名 称 叫 作 “ 键 >” book 
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”“J. R. R. Tolkien” 和 “1937”。 在 JavaScript 对 象 中 ， 我 
对 象 中 的 键 分 别 是 title、author、published。 在 为 对 象 添加 
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属性 时 ， 使 用 花 括 号 将 键 和 值 括 起 来 ， 键 与 值 之 间 加 入 冒号 ， 如 图 3-2 所 示 。 
键 什 


tule ihe dobby 


分 隔 键 值 对 的 冒号 
图 3-2 用 键 - 值 对 来 设置 属性 
键 - 值 对 有 时 也 称 作 “ 名 称 - 值 对 ” 但 本 书 中 一 直 使 用 “ 键 - 值 对 ”。 
在 下 列 代码 清单 中 ， 创 建 了 一 个 包含 单个 属性 的 对 象 。 
代码 清单 3-5 一 个 单个 属性 的 对 象 
(http://jsbin.com/funiyu/edit?js,console) 


var book; 
book = { 
title : "The Hobbit" 
}3 
在 上 述 代码 中 ， 先 声明 一 个 变量 ， 再 创建 一 个 对 象 ， 并 将 这 个 对 象 赋值 给 该 变量 。 该 对 
和 象 仅 有 一 个 属性 ， 该 属性 的 键 是 “title”， 该 属性 的 值 是 “The Hobbit”。 简 单 地 说 ， 对 象 
book 的 属性 title 值 为 “The Hobbit”。 
属性 的 值 并 不 仅 限 于 数字 和 字符 串 ， 例 如 “50” 或 者 “The Hobbit” 还 可 以 使 用 以 前 声 
明 过 的 变量 作为 属性 的 值 。 以 下 代码 清单 把 一 本 书 的 名 称 赋值 给 一 个 变量 ， 然 后 使 用 该 变量 
作为 对 象 的 属性 值 。 
代码 清单 3-6 ”变量 作为 属性 的 值 
(http://jsbin.com/funiyu/edit?js,console) 


var book; 
var bookName; 
bookName = "The Adventures of Tom Sawyer";  // 把 书 名 赋值 给 变量 
book = { 
title : bookName  // 该 变量 作为 属性 的 值 


}; 
将 上 述 把 变量 作为 对 象 属性 的 方法 应 用 在 对 和 象 只 有 一 个 属性 的 情况 ， 貌 似 有 些 睹 侈 ， 与 其 这 
样 复杂 ， 还 不 如 简 简 单单 ， 直 接 使 用 一 个 变量 。 下 面 介 绍 如 何 创 建 一 个 拥有 多 个 属性 的 对 象 。 
当 对 象 有 多 个 属性 时 ， 请 使 用 逗号 来 分 隔 键 - 值 对 。 图 3-3 显示 了 拥有 两 个 属性 的 对 

象 。 代 码 清单 3-7 创建 了 两 个 对 象 ， 每 个 对 象 拥 有 两 个 属性 。 


{ 


4 I 


title : "The Hobbit", 
author : "J. R. R. Tolkien", 
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属性 就 是 键 - 值 对 
对 象 定义 开始 { 

。 全 逗号 分 隔 
title : The Hobbit", 各 个 属性 
acnez eu RR Tolkieny 

对 象 定义 结束 ) 
图 3-3 创建 一 个 拥有 两 个 属性 的 对 象 
代码 清单 3-7 拥有 多 个 属性 的 对 象 
(http://jsbin.com/funiyu/edit?js,console) 
Var bookl; 
var book2; 
book1l = { 
title : "The Hobbit", // 用 逗号 分 隔 各 个 属性 
author : "J. R. R. Tolkienn 
}3 
book2 = { 
title : "Northern Lights", // 用 键 - 值 对 设置 属性 
author : "Philip Pullman" 


3 
现在 我 们 已 经 学 会 如 何 创建 对 象 ， 下 面 学 习 如 何 访问 对 象 的 属性 。 


3.3 访问 对 象 的 属性 


对 象 的 概念 与 急救 包 非 常 相 似 。 我 们 可 以 把 急救 包 从 一 个 人 传递 给 另 一 个 人 ， 从 一 个 地 
方 拿 到 另 一 个 地 方 。 只 有 当 我 们 需要 使 用 这 个 急救 包 内 的 物品 时 ， 才 知道 急救 包 里 面 有 消毒 
剂 、 剪 刀 、 绷带 等 物品 。 
对 于 JavaScript 对 象 ， 可 以 使 用 圆 点 运算 符 来 访问 对 象 的 属性 值 ， 具 体形 式 是 使 用 圆 点 
运算 符 将 存放 对 和 象 的 变量 名 称 和 对 象 的 属性 名 称 〈 键 ) 连接 在 一 起 。 如 果 把 急救 包 作 为 一 个 
对 象 〈kit 是 存放 该 对 象 的 变量 )， 可 以 使 用 kit.antiseptic、kit.scissor 或 kit.bandages 来 访问 属 
性 值 。 把 书 作为 一 个 对 象 ， 如 果 要 访问 book (存放 该 对 象 的 变量 ) 的 author 属性 值 ， 可 以 
写成 book.author， 如 图 3-4 所 示 。 


变量 名 ” 键 


book . author 


司 点 运算 符 
图 3-4 ”使 用 圆 点 运算 符 访问 对 象 的 属性 
FE 显示 在 控制 台 上 ， 如 下 所 示 : 


i 


以 下 代码 清单 3-8 将 book 对 象 的 title 和 author 属 ; 
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> The Hobbit 
> J. R. R. Tolkien 


代码 清单 3-8 ”使 用 圆 点 运算 访问 对 象 的 属性 值 
(http://jsbin.com/funiyu/edit?js,console) 


var book; 

book = { 
title : "The Hobbit", // 使 用 键 - 值 对 为 对 象 属性 赋值 
author : "J. R. R. Tolkien", 
published : 1937 


}; 
console.1og (book.title) ; ”// 使 用 圆 点 运算 符 访问 属性 
console.1og (book .author) ; 


在 上 述 代码 清单 3-8 中 ， 使 对 象 的 属性 能 够 整齐 排列 的 冒号 可 以 增加 程序 的 可 读 性 。 
JavaScript 运行 时 会 自动 忽略 那些 多 余 的 空格 。 整 齐 的 代码 块 和 排 成 一 行 的 属性 值 可 以 使 程 
序 更 容易 阅读 和 理解 ， 特 别 是 当 程序 代码 大 规模 增长 的 时 候 ， 这 种 整洁 的 形式 使 代码 更 加 易 
于 阅读 、 易 于 维护 并 易于 更 新 。 
显然 ， 使 用 一 个 对 象 来 替换 个 变量 可 以 使 程序 更 加 简洁 。 这 种 做 法 使 我 们 能 够 清 
晰 地 看 到 程序 如 何 运行 ， 而 那些 藏 在 内 部 的 细节 只 有 在 需要 时 才 去 查看 。 在 程序 中 ， 书 籍 被 
当 作 一 个 整体 看 待 ， 只 有 在 需要 的 时 候 ， 才 会 去 访问 书籍 名 称 、 书 籍 作者 或 出 版 日 期 。 在 本 
章 中 ， 用 一 个 拥有 3 个 属性 的 变量 来 蔡 换 3 个 单独 变量 ， 这 似乎 也 算 不 上 是 很 大 的 改进 ， 但 
是 当 我 们 开始 使 用 第 7 章 的 函数 对 象 和 第 8 章 的 数组 对 象 时 ， 就 会 看 到 使 用 对 和 象 所 带 来 的 简 
洁 性 和 明晰 度 。 

我 们 可 以 像 使 用 变量 一 样 来 使 用 属性 值 。 下 列 代码 清单 3-9 将 输出 书籍 名 称 和 书籍 作 
者 ， 二 者 之 间 由 字符 串 “by” 相 连 : 


re, 
Py 


FT 


> The Hobbit by J. R. R. Tolkien 
> Northern Lights by Philip Pullman 


人 。 代码 清单 3-9 连接 多 个 字符 串 属性 
http://jsbin.com/yoweti/edit?js,console 


Var bookl; 
Var book2; 
bookl = { 
title: "The Hobbit", 
author: "J. R. R. Tolkien" 
类 
book2 = { 
title: "Northern Lights", 
author: "Philip Pullman" 
} 
console.log(bookl.title + " by " + bookl.author); 
console.log(book2.title + " by " + book2.author); 
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3.4 更 新 对 象 的 属性 


在 一 个 小 测验 的 应 用 程序 中 ， 玩 家 针对 一 个 个 问题 进行 回答 。 问 题 的 总 数 、 玩 家 答对 问 


题 的 数量 、 以 及 玩家 的 得 分 都 会 随时 间 的 变化 而 变化 。 我 们 可 以 创建 一 个 玩家 对 象 ， 使 其 共 
有 一 系列 初始 值 ， 然 后 每 当 他 回答 一 个 新 问题 ， 便 对 这 一 系列 值 进行 更 新 。 使 用 圆 点 运算 符 


可 以 更 改 已 经 存在 的 属性 ， 或 者 为 对 象 添加 新 的 属性 。 如 以 下 代码 所 示 : 


代码 清单 3-10 ”使 用 圆 点 运算 符 更 新 对 象 的 属性 
http:/jsbin.com/mulimi/edit?js,console) 


var playerl]l; 

playerl1 = { 
name: "Max", // 在 创建 对 象 时 设置 初始 属性 
attempted: 0, 


COrrect: 0; 


playerl .attempted 


1; // 使 用 圆 点 运算 符 来 更 新 属性 


playerl.correct = 1; 
playerl.score = 50; // 添 加 一 个 新 属性 并 对 其 赋值 


在 以 上 代码 中 ， 在 创建 对 象 时 ， 为 attempted 和 correct 属性 设置 了 初始 值 0， 后 来 将 这 


些 属性 的 值 更 新 为 1。 程 序 使 用 了 赋值 运算 符 =。 等 号 将 其 右边 的 值 1 赋值 给 等 号 左边 的 属 


性 playerl.attempted。 代码 中 设置 了 attempted 和 correct 两 个 属性 ， 然 后 立即 对 它们 进行 了 


更 新 。 实 际 上 ， 玩 家 每 回答 一 个 问题 ， 程 序 就 会 做 一 次 更 新 响应 。 


我 们 也 可 以 在 创建 对 象 后 再 向 其 添加 新 属性 。 在 上 述 代码 清单 3-10 ! 


， 将 50 赋值 给 对 


象 playerl 的 新 属性 score: 


playerl.score = 50; 


在 最 初创 建 对 象 playerl 时 ， 并 没有 设置 属性 score。 为 一 个 本 来 不 存在 的 属性 score 赋 


值 意味 着 自动 创建 了 该 属性 。 


我 们 可 以 在 计算 中 使 用 一 个 变量 ， 并 将 计算 结果 再 赋值 给 该 变量 。 以 下 代码 清单 3-11 


显示 了 如 何 更 新 玩家 的 属性 : 


> Max has scored 0 


> Max has scored 50 


入 ”代码 清单 3-11 先 计 算 再 赋值 
0¢8 (http://jsbin.com/cuboko/edit?js,console) 
var playerl; 
playerl1 = { 
name: "Max", 


score: 0 
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console.log(playerl.name + " has Scored " + playerl.score); 
playerl.score = playerl.score+50;// 先 计算 等 号 右边 的 表达 式 ， 再 将 计算 结果 赋值 给 该 属性 


console.log(playerl.name + " has scored " + playerl.score); 
更 新 属性 score( 在 代码 中 以 粗 体 显示 ) 时 ，JavaScript 会 先 计算 等 号 右边 的 表达 式 。 因 
为 playerl.score 为 0， 所 以 表达 式 变 为 0+50， 得 到 50; 然后 JavaScript 将 50 赋值 给 等 号 左 
边 ， 也 就 是 属性 score。 就 这 样 ， 将 playerl.score 从 0 更 新 为 50。 


3.5 其 他 示例 


尽 发 The Crypt 程序 能 够 给 读者 一 个 持续 的 机 会 来 学 习 和 练习 JavaScript 新 概 
念 ， 但 是 其 他 更 多 的 示例 将 有 助 于 读者 拓展 展 学 习 JavaScript 的 深度 和 广度 。 以 下 示例 中 
都 使 用 花 括号 来 创建 对 象 ， 然 后 仅仅 使 用 一 个 步骤 将 该 对 象 赋值 给 一 个 使 用 var 关键 字 


3.5.1 撰写 一 条 博客 


每 一 条 博客 都 是 由 若干 条 博客 帖子 组 成 。 每 一 条 帖子 都 包括 作者 信息 、 创 建 日 期 、 评 论 
等 内 容 。 下 面 是 用 一 个 对 象 表 示 一 条 帖子 : 


代码 清单 3-12 一 条 博客 帖子 
和 http://jsbin.com/jiculu/edit?js,console) 


丙 


区 
总 
a 
8 


var post = { 


td % 1 

title : "My Crazy Space Adventure", 

author : "Philae", 

created : "2015-06-21", 

body : "You will not believe where I just woke up!! Only on a comet..." 


bs 


3.5.2 ”创建 一 个 日 历 


历 事件 一 定 会 包含 若干 个 约会 。JavaScript 确实 有 一 个 现成 的 Date 对 象 ， 用 于 处 
里 日 期 和 时 间 ， 但 是 在 本 书 中 并 不 会 使 用 它 。 以 下 代码 中 用 特定 格式 的 字符 串 来 表示 
约会 。 


(http://jsbin.com/viroho/edit?js,console) 


到 代码 清单 3-13 ”一 个 日 历 事件 
a 


var event = { 
title : "Appraisal Meeting", 
startDate : "2016-10-04 16:00:00", 
endDate : "2016-10-04 17:00:00", 


location : "Martha's office"， // 在 双 引 号 界定 的 字符 串 中 包含 表示 所 有 格 的 撤 号 


importance: 1, 
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notes : 'Don\'t forget the portfolio!' // 在 单 引号 界定 的 字符 串 中 包含 
// 表 示 缩 略 的 撒 号 
} 
请 注意 如 何 处 理 属性 notes 中 的 撒 号 。 撤 号 之 前 的 反 和 斜 杠 符 起 到 以 下 作用 : 避免 
JavaScript 将 撒 号 看 作 表示 字符 串 结 尾 的 单 引 号 。 这 个 反 斜 杠 称 为 转 义 字符 ， 在 程序 输出 时 
` 会 显示 ， 如 下 所 示 : 


event.notes = 'Don\'t forget the portfolio!',; 


以 上 代码 的 输出 结果 : Don t forget the portfolio! 
使 用 双 引 号 界定 字符 串 时 ， 转 义 字 符 能 够 显示 该 字符 串 内 包含 的 双 引 号 ， 如 下 所 示 ， 两 
个 转 义 字符 后 面 的 双 引 号 都 会 显示 出 来 。 


var story = "She looked at me. NIWhat did you say?\" she asked."; 
以 上 代码 的 输出 结果 : 


She looked at me. "What did you say?" she asked. 
JavaScript 也 使 用 反 斜 杠 转 义 字符 来 标明 特殊 字符 ， 例 如 ，\t 为 Tab 键 ，Y 为 回 车 键 。 
日 历 中 包含 大 量 的 事件 对 象 。 如 果 所 创建 的 对 象 具 有 相似 的 结构 ， 是 否 能 够 精简 这 个 创 
建 过 程 ? 在 第 9 草 ， 读 者 将 学 习 使 用 构造 函数 来 解决 上 述 问题 。 
3.5.3 ”天 气 怎么 样 ? 

在 线 气象 服务 可 以 为 我 们 的 程序 提供 天 气 数据 。 这 些 数据 通常 使 用 JSON 格式 
(JavaScript Object Notation 见 第 20 章 )， 这 些 数据 包含 许多 详细 的 属性 ， 与 本 章 中 学 到 的 对 
象 非常 相似 。 以 下 代码 显示 了 由 在 线 气象 服务 提供 的 定位 数据 。 


代码 清单 3- 二 ”天气 应 用 中 的 定位 


My (http://jsbin.com/diguhe/edit?js,console) 
var location = { 

Tale : "San Francisco", 
rstate" : nCA' 2 
"country" US 
宇和 : "194101", 
"lJatitude" :337.775.; 
"longitude" : -122.418, 
"elevation" : 47.000 


在 以 上 代码 中 ， 将 “ 键 ” 放 在 双 引 号 内 。 尽 管 在 以 前 的 例子 中 还 没有 看 到 将 “ 键 ” 放 在 
引号 内 的 情形 ， 但 事实 上 ，JavaScript 常常 会 将 “ 键 ”( 属 性 名 称 ) 放 在 引号 中 ， 单 引号 或 双 
引号 都 可 以 。 尤 其 是 当 属性 名 称 不 满足 在 第 2 章 中 提 到 的 变量 名 称 的 要 求 时 ， 引 号 是 必 不 可 
少 的 。 本 书 将 在 第 10 章 更 详细 地 介绍 如 何 使 用 此 类 属性 的 名 称 。JSON 格式 规定 了 如 何在 互 
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联网 上 将 JavaScript 对 象 数 据 作 为 文本 进行 传输 。JSON 格式 要 求 所 有 “ 键 ”〈 属 性 名 称 ) 都 
必须 放 在 双 引 号 中 。 在 编程 工作 中 ， 有 时 候 会 遇 到 诸如 JSON 格式 的 强制 要 求 ， 因 此 许多 程 
序 员 的 经 验 之 谈 是 索性 把 “ 键 ” 全 部 放 在 引号 内 ， 以 免 造 成 程序 的 不 一 致 和 潜在 错误 。 

以 上 代码 中 还 将 “ 键 - 值 对 ”中 的 冒号 进行 了 整齐 排列 。 意 义 何在 ? 将 其 与 本 节 中 的 其 
他 代码 进行 比较 ， 是 不 是 感觉 这 样 整 齐 排列 的 代码 更 加 容易 阅读 ? 这 确实 是 很 多 程序 员 长 期 
以 来 形成 的 格式 习惯 ， 你 可 以 效仿 ， 当 然 也 可 以 气 充 。 


3.5.4 一 个 小 测验 
经 常 自 测 是 一 种 很 好 的 学 习 方 法 。 测 验 应 用 程序 可 以 发 现 问 题 ， 并 将 答案 作为 对 象 的 属 
性 ， 如 以 下 代码 所 示 。 


和 >》 代码 清单 3-15 测验 应 用 程序 中 的 问题 和 答案 
(http://jisbin.com/damoto/edit?js,console) 


var questionAndAnswer = { 


question : "What is the capital of France?'", 
answerl1l : "Bordeaux", 

answer2  : "EF", 

answer3 : "Paris", 

answer4 : "Brussels'", 

correctAnswer : "Paris", 

marksForQuestion : 2 


3 

测验 应 用 程序 可 能 包括 多 种 问题 类 型 ， 上 述 代 码 是 一 道 多 项 选择 题 。 其 实 ， 针 对 每 种 问 
题 类 型 都 有 固定 的 呈现 形式 ， 在 呈现 这 些 类 似 结 构 的 数据 时 ， 模 板 是 一 种 好 方法 ， 我 们 将 在 
第 19 章 详 细 讨 论 。 
3.5.5 ”创建 自己 的 程序 

完成 以 上 几 个 示例 之 后 ， 你 自己 也 跃跃欲试 了 吧 ? 想 要 在 程序 中 设计 什么 样 的 对 象 来 代表 
你 的 实体 内 容 ? 去 JS Bin 吧 ! 在 那里 ， 可 以 创建 对 象 并 将 其 属性 显示 在 控制 台 上 。 去 本 书 的 在 
线 论坛 吧 ! 在 那里 ， 可 以 分 享 作品 ， 还 可 以 与 同行 讨论 问题 。 论 坛 的 网 址 是 https://forums. 
manning. com/forums/get-programming-with-javascript。 


3.6 ”游戏 The Crypt 一 一 玩家 对 象 


在 本 节 中 ， 要 把 我 们 刚刚 学 到 的 JavaScript 有 关 对 象 的 相关 知识 应 用 到 开发 游戏 中 去 。 
图 3-5 显示 ， 目 前 你 在 游戏 中 选中 了 一 个 玩家 对 象 。 在 第 2 章 中 ， 考 虑 到 游戏 The Crypt 中 
需要 为 玩家 存储 信息 ， 我 们 使 用 了 以 下 变量 来 呈现 一 位 玩家 : 


playerName = "Kandra",; 
playerHealth = 50; 
playerPlace = "The Dungeon of Doom"; 
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playerIitems = "a rusty key, The Swordq of Destiny, a piece of cheese'" ; 
Players Places Maps 
player variables place objects linking places via exits 
a player object place items Game 
showing player info place exits render 
player items showing place info get 
Player Constructor Place Constructor go 


图 3-5 ”The Crypt 中 的 游戏 元 素 


针对 多 个 玩家 ， 可 以 使 用 变量 前 级 ， 例 如 player1IName，player2Name 等 ,为 游戏 中 的 每 
个 玩家 复制 这 些 变量 。 显 然 ， 这 种 使 用 JavaScript 对 象 将 每 位 玩家 的 所 有 信息 进行 打包 分 组 
的 方法 非常 简洁 明了 。 以 下 代码 清单 3-16 显示 了 如 何 将 一 位 玩家 表示 为 一 个 对 和 象 ， 并 在 控 
制 台 上 显示 对 象 的 属性 。 输 出 如 下 : 


> Kandra 

> Kandra is in The Dungeon of Doom 

> Kandra has health 50 

> Items: a rusty key, The Sword of Destiny, a piece of cheese 


和 。 代 码 清单 3-16 将 一 位 玩家 作为 一 个 对 象 
ys (http://jsbin.com/qelene/edit?js,console) 


var player; 


player = { 
name: "Kandra", 
health: 50, 


place: "The Dungeon of Doom", 
items: "a rusty key, The Sword of Destiny, a piece of cheese" 
console.log (player.name); 


console.log(player.name + " is in " + player.place); 


( 
( 
console.log(player.name + " has health " + player.health),; 
console.log("Items: " + player.items); 


以 上 代码 的 最 后 4 行 仅 用 于 显示 玩家 的 信息 。 每 次 想 要 显示 玩家 的 信息 都 必须 重复 这 些 
代码 ， 这 似乎 有 点 麻烦 。 如 果 能 够 一 次 性 编写 这 些 代 码 ， 然 后 根据 需要 多 次 调用 ， 那 就 太 
好 了 ! 
非常 幸运 的 是 ， 确 实 可 以 这 样 做 ! 在 JavaScript 中 可 以 定义 函数 (functions)。 函 数 就 是 
一 组 执行 某 项 任务 的 JavaScript 代码 。 函 数 的 功能 非常 强大 ， 上 文中 提 到 两 项 任务 ， 重 复 多 
次 创建 多 个 玩家 对 象 以 及 显示 玩家 的 多 个 属性 ， 会 因为 使 用 函数 而 变 得 简单 。 读 者 将 在 后 续 
的 四 章 中 详细 了 解 JavaScript 函数 。 
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3.7 ”本 章 小 结 


国 将 相关 的 变量 分 组 。 
国 将 对 象 定义 为 若干 属性 的 集合 ， 这 些 属 性 用 花 括 号 括 起 来 ， 各 个 属性 之 间 用 去 号 分 隔 : 


var player = { name : "Hadfield", location : "The ISS" }; 


国 对 于 每 个 属性 ， 使 用 一 个 键 - 值 对 ， 键 和 值 之 间 用 冒号 分 隔 : 


name: "Hadfield" 


国 使 用 圆 点 运算 符 访问 属性 的 值 。 如 果 将 一 个 对 象 分 配给 一 个 变量 ， 使 用 圆 点 运算 符 
将 属性 名 称 连接 到 变量 名 称 之 后 : 


player.name 


国 在 表达 式 中 可 以 像 使 用 变量 一 样 使 用 属性 : 


console.1og (player.name +"is in"+ player. location) ; 


国 使 用 赋值 运算 符 = 为 属性 赋值 : 


player.location ="On a space walk"; 
加 根据 需要 ， 可 以 随时 向 现 有 对 象 添加 新 属性 : 


player.oxygen = 96; 
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第 4 瘟 ”图 数 : 按 需 执行 代码 


本 章 内 容 包括 : 

图 编写 有 函数 的 指令 

图 定义 函数 一 一 明确 说 明代 码 是 按 需 执行 任务 
国 调用 函数 一 一 按 需 执行 代码 

国 减少 代码 中 的 重复 

图 使 程序 更 易于 阅读 和 更 新 


《JavaScript 开发 实战 》 的 一 个 重要 主题 就 是 通过 良好 的 组 织 来 加 强 对 程序 的 复杂 性 管 
理 。 在 本 书 的 第 2 章 中 ， 我 们 学 会 将 信息 存储 在 变量 中 ， 选 取 合 适 的 变量 名 有 助 于 理解 该 变 
量 在 程序 中 的 用 途 。 在 本 书 的 第 3 章 中 ， 我 们 学 会 将 变量 分 组 成 为 对 象 的 属性 ， 这 样 可 以 将 
对 象 看 作 一 个 整体 ， 只 有 在 需要 时 才 深 入 其 细节 。 在 本 章 我 们 将 看 到 另 一 种 组 织 代码 的 方 
法 ， 它 可 以 避免 重复 ， 它 就 是 我 们 将 要 学 习 的 函数 。 


4.1 重复 问题 


随 着 程序 越 来 越 长 、 越 来 越 复杂 ， 我 们 发 现 有 些 部 分 的 代码 非常 类 似 ， 相 互 之 间 只 有 微 
小 的 差别 ， 尤 其 是 一 些 经 常用 到 的 任务 ， 例 如 显示 文本 、 为 图 像 设置 动画 或 者 将 数据 保存 到 
数据 库 。 现 在 我 们 就 来 关注 这 些 重 复 的 代码 段 ， 它 们 就 是 函数 的 主要 素材 。 

函数 就 是 只 需 一 次 编写 但 是 可 以 多 次 使 用 的 代码 。 本 书 第 4.2 节 将 讨论 如 何 创建 函数 ， 
在 这 里 首先 呈现 几 个 重复 的 示例 。 


4.1.1 将 对 象 的 属性 作为 文本 进行 显示 


程序 使 用 对 象 和 变量 来 存储 各 种 信息 一 一 个 人 资料 、 帖 子 、 文 档 和 照片 ， 首 先 对 其 命 
名 ， 然 后 把 它们 存储 在 计算 机 的 某 个 地 方 。 我 们 常常 需要 向 用 户 显 示 这 些 信息 ， 例 如 ， 针 对 
些 表示 电影 的 对 象 ， 常 常 需要 将 每 部 电影 的 信息 显示 在 控制 台 上 ， 如 图 4-1 所 示 。 


加 File ~ Addlibrary Share HTML CSS JavaScript Console Output BE Account Blog Help 


WActors: Amy Poehler, Bill Hader" 


"Directors: Pete Doctor, Ronaldo Del Carmen" 


图 4-1 在 JSBin 控制 台 上 显示 一 部 电影 的 信息 


第 4 章 ”函数 : 按 需 执行 代码 


为 了 实现 图 4-1 中 的 输 
所 示 : 
人 代码 清单 4-1 在 控制 人 上 显示 一 个 对 象 的 多 个 属性 
Wy (http://jsbin.com/besudi/edit?js, console) 


上 二 
| 


var moviel; 
moviel = { 
title: "Inside Out", 


actors: "Amy Poehler，Bill] Hader",// 创 建 一 个 对 象 moviel 


directors: "Pete Doctor, Ronaldo Del Carmen" 
console.log("Movie information for " + moviel.title); 


CONnsSole,10g (= 0 


console.log("Actors: " + moviel.actors); // 调 用 console.] 


//moviel 的 各 个 属 怕 


console.log("Directors: " + moviel.directors); 


CONneole .Lg (Vs Dy 


任务 ， 仅 仅 针对 一 部 电影 ， 程 序 就 5 次 调用 console.log。 如 下 


Log 5 次 ， 将 对 象 
FE 显示 在 控制 台 上 


如 果 每 次 要 显示 一 部 电影 信息 时 都 必须 写 以 上 五 行 代 码 ， 这 完全 是 重复 性 工作 。 如 果 想 


区 


w 
lh 


= 人 
下 面 的 代码 清单 展示 了 针对 三 部 电影 的 重复 编码 。 


本。 代码 清单 4-2 将 若干 相似 对 象 的 属性 显示 在 控制 台 上 
0 (http://jsbin.com/gewegi/edit?js,console) 


console.log("Movie information for " + moviel.title); 
CONSOLE: LO (=e Ws 
console.log("Actors: " + moviel.actors); 
console.log("Directors: " + moviel.directors); 
COnsole. og (===== 0 
console.log("Movie information for " + movie2.title); 
CONSolLe: Log (l= SE WT ) 
console.log("Actors: " + movie2.actors); 
console.log("Directors: " + movie2.directors); 
CONSOl8 LO (T= == 有 
console.log("Movie information for " + movie3 .title) ; 
CONSOlLe. JOG (T= 有 
console.log("Actors: " + movie3 .actors) ; 
console.log("Directors: " + movie3.directors); 
GONnsole log ("= Ts 


要 改变 显示 的 信息 ， 就 必须 对 其 在 代码 中 出 现 的 所 有 地 方 都 做 出 修改 ， 并 且 确 保修 改 前 后 


需要 显示 的 电影 可 能 不 止 三 部 ， 需 要 显示 的 电影 信息 也 可 能 会 更 多 。 例 如 ， 我 们 需要 将 


information 更 改 为 info， 就 必须 确保 找到 information 出 现 的 所 有 地 方 ， 


info。 


将 


全 部 更 改 为 
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以 上 三 组 (每 一 组 包含 5 个 ) 语句 几乎 相同 。 唯 一 的 差异 就 是 显示 具体 哪 一 部 电影 的 属 
性 ， 是 moviel， 是 movie2， 还 是 movie3。 如 果 我 们 能 够 定义 一 组 语句 ， 并 要 求 JavaScript 


下 一 节 还 会 有 一 个 3 


必 再 忍 了 ! 函数 会 来 拯救 我 们 !) 
4.1.2 ”加 税 算出 总 成 本 


将 税额 (tax) 与 价格 (price》 相 加 是 一 个 非常 简 六 


价格 相 加 ， 以 计算 出 总 成 本 (totalcost)， 如 下 所 示 : 


>price = 


$140 
>tax @ 15% 


>totalcost 


= 21 
= $161 


以 下 代码 清单 是 


3 ”代码 清单 4-3 ”加 税 算出 总 成 本 
My (http://jsbin.com/kawocu/edit?is,console) 


var salel; 


var sale2; 


var sale3; 


salel = { 
sale2 = { 
sale3 = { 


Salel .七 aX 


个 为 三 宗 不 同 交易 加 税 的 程序 。 两 个 运算 符 * 和 /分 别 执行 乘法 和 除法 。 


price: 140, taxRate: 15 }; 
price: 40, taxRate: 10 }; 
price: 120, taxRate: 20 }; 
salel.price * salel.taxRate / 100; // 这 三 个 计算 的 结构 完全 相同 ， 运 

// 算 符 *x 和 /分 别 执行 乘法 和 除法 


sale2.tax = 


sale3.tax = 
salel.total 


sale2.tot 
sale3.tot 
console.1 
consol 
console.1 
consol 
console.1 
consol 


console.1 


0 0 0 0 0 0 no nm 


consol 


console.1 


log 


og 


sale2.price * sale2.taxRate / 100; 
sale3.price * sale3.taxRate / 100; 


在 需要 时 调用 这 一 组 语句 ， 那 就 太 好 了 ! 这 就 是 函数 的 意义 所 在 ! 
复 编码 的 示例 。( 别 担心 ， 当 我 们 对 重复 编码 忍无可忍 之 时 ， 就 不 


又 常见 的 任务 。 我 们 需要 将 税额 与 


= salel.price + salel.tax; // 这 三 个 计算 的 结构 也 完全 相同 


= sale2.price + sale2.tax; 

= sale3.price + sale3.tax; 

"price = $" + Salel.price); 

"tax @ " + salel.taxRate + "$$ = $" 
"totalcost = $'" + Salel.total); 
"price = $" + sale2.price); 

"tax @ " + Sale2.taxRate + "% = $" 
"totalcost = $'" + Sale2.total); 


"price = $" + sale3.price); 


"tax @ " + sale3.taxRate + "$$ = $" 


("totalcost = $" + sale3.total); 


+ Salel.tax); 


+ Sale2.tax); 


+ Sale3.tax); 


重复 这 么 多 次 简直 太 烦 人 了 ! 不 仅 console.log 代码 在 多 次 重复 ， 计 算 的 结构 也 在 重复 。 
我 们 实在 想 要 有 一 组 代码 ， 每 次 需要 时 ， 拿 来 就 可 以 用 。 放 心 ， 下 面 我 们 就 会 学 到 一 个 好 办 
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法 来 解决 这 个 重复 问题 。 让 我 们 一 起 来 学 习 函 数 吧 ! 


4.2 ”定义 函数 和 调用 函数 


正如 一 个 对 象 是 若干 个 属性 的 集合 ， 一 个 函数 就 是 一 组 语句 或 指令 的 集合 。 函 数 有 助 于 
避免 重复 ， 使 代码 更 有 条 理 ， 并 且 更 易于 更 新 和 维护 。 我 们 知道 ， 给 变量 和 对 象 取 一 个 合适 
的 名 字 可 以 使 代码 容易 理解 。 同 理 ， 命 名 良好 的 函数 也 会 增强 程序 的 可 读 性 。 如 果 发 现 某 些 
函数 在 程序 中 被 多 次 使 用 ， 并 且 在 其 他 程序 中 也 非常 有 用 ， 就 可 以 创建 一 个 实用 函数 库 以 供 
更 多 的 项 目 使 用 。 

在 上 一 节 中 ， 我 们 看 到 两 个 程序 示例 ， 其 中 相同 结构 的 代码 反复 出 现 。 为 了 减少 代码 膨 
胀 ， 可 以 使 用 以 下 代码 来 蔡 换 上 述 重复 部 分 : 


Cr 


showMovieInfo( ); 
showCostBreakdown( ); 


使 用 这 两 个 函数 ，showMovieInfo 和 showCostBreakdown， 应 该 产生 与 代码 清单 4-2 
和 4-3 等 效 的 输出 。 这 两 个 函数 也 应 该 能 够 在 需要 时 被 多 次 调用 。 下 面 我 们 来 看 看 这 样 的 魔 
法 代码 如 何 做 到 随 叫 随 到 ! 
4.2.1 定义 新 困 数 

定义 一 个 函数 包含 以 下 元 素 ， 如 图 4-2 所 示 : 

罩 关键 字 function 

图 | 出 括号 ，() 

图 花 括 号 之 间 的 代码 块 ，{} 


圆 括号 
关键 字 function EuneelonooOnl 
花 括号 之 间 的 代码 块 ， 
称 作 函 数 体 


} 
图 4-2 ”函数 定义 所 包含 的 元 素 


花 括 号 之 间 的 代码 块 就 是 在 任何 时 候 使 用 该 函数 时 所 执行 的 功能 ， 这 些 代 码 块 也 称 为 函 
数 体 。 以 下 是 函数 定义 的 大 致 模样 


function () { 
// 这 里 是 要 执行 的 代码 块 
} 
一 旦 定义 了 一 个 函数 ， 就 可 以 将 它 赋值 给 一 个 变量 。 在 下 一 个 代码 清单 中 定义 了 一 个 函 
数 ， 在 控制 台 上 显示 “Hello World!”， 并 且 还 将 该 函数 赋值 给 变量 sayHello。 
代码 清单 4-4 一 个 简单 的 函数 定义 和 赋值 
0 (http://jsbin.com/tehixo/edit?js,console) 


三 | 


var sayHello; // 声 明 变 量 
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sayHello = function ( ) { // 定 义 函 数 ， 并 将 该 函数 赋值 给 变量 sayHello 
console.1og ("Hello World!") ;// 将 代码 放 在 花 括号 之 间 ， 每 当 运 行 函数 时 就 执行 该 代码 


】 
我 们 可 以 看 到 ， 以 上 代码 中 的 函数 定义 由 以 下 几 部 分 组 成 : 函数 关键 字 function， 空 的 


圆 括 号 和 函数 体 代码 块 。 这 个 函数 体 只 有 一 条 语句 :console.log(“HelloWorld!”); 就 这 样 ， 我 

们 定义 了 一 个 函数 ， 以 后 就 可 以 使 用 该 函数 。 每 次 运行 该 函数 ， 都 会 执行 函数 体 中 的 代码 ， 

程序 的 实际 运行 情况 在 4.2.3 节 中 可 以 看 到 。 
以 下 代码 清单 4-5 是 将 有 关 函 数 定义 后 将 它们 赋值 给 变量 的 更 多 示例 。 


代码 清单 4-5 ”有关 函数 定义 和 赋值 的 另外 两 个 示例 


(http://jsbin.com/xezani/edit?js,console) 


让 


var findTotal; 
var displayMenu; 
findTotal = function ( ) { 
result = numberl + number2; // 在 程序 的 其 他 地 方 必须 已 经 声明 过 变量 result， 
//numberl 和 number2 


二 

displayMenu = function ( ) { 
console.log("Please choose an option:"); 
console.log("(1) Print log"); 
console.log("(2) Upload file") ， 
console.log("(9) Quit"); 


ky 


4.2.2 ”函数 表达 式 和 困 数 声明 
在 上 述 例子 中 ， 一 直 在 使 用 函数 表达 式 (function expressions) 来 定义 函数 ， 并 使 用 赋 
直 运 算 符 将 函数 赋值 给 变量 ， 如 下 所 示 ; 


Sy 


var findTotal = function () { .… }; // 函 数 表达 式 为 粗 体 


除了 以 上 使 用 函数 表达 式 的 方法 ， 还 可 以 使 用 函数 声明 (function declaration )， 束 是 在 
定义 函数 的 同时 为 该 函数 声明 一 个 名 称 ， 如 下 所 示 : 


Function findTotal () { .. } // 为 该 函数 声明 一 个 名 称 
采用 以 上 两 种 方法 定义 函数 基本 上 等 效 ， 当 然 也 有 一 些 细 微 的 差异 ， 但 本 书 对 此 差异 不 
做 详 述 。 在 本 书 第 1、2 章 都 采用 了 函数 表达 式 的 方法 ， 目 的 在 于 强调 函数 与 对 象 、 数 组 三 
者 在 创建 和 赋值 方面 的 相似 性 ， 如 下 所 示 : 
var numOfDays = 7;// 将 一 个 数字 赋值 给 一 个 变量 
var player = { .… };// 创 建 一 个 对 象 ， 并 将 其 赋值 给 一 个 变量 
var findTotal = function () { .. }; // 创 建 一 个 函数 ， 并 将 其 赋值 给 一 个 变量 
var items = [] ; // 创 建 一 个 数组 ， 并 将 其 赋值 给 一 个 变量 ( 见 第 8 章 ) 


目前 ， 读 者 暂时 不 必 考 虑 函数 声明 ， 更 不 必 考 虑 冰 数 声明 和 冰 数 表达 式 之 间 的 差别 。 当 
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你 在 本 书 的 第 三 部 分 中 再 次 遇 到 函数 声明 这 个 语法 时 ， 就 可 以 轻松 驾驭 了 。 
仅仅 依靠 定义 函数 ， 我 们 还 是 无 法 实现 以 下 功能 ， 在 控制 台 上 显示 “Hello World!1”、 计 

算 总 数 或 显示 菜单 。 我 们 需要 一 种 方法 来 命令 函数 执行 其 函数 体 中 的 指令 列表 . 

4.2.3 使 用 函数 


一 旦 将 函数 赋值 给 一 个 变量 ， 每 当 要 执行 函数 体 中 的 语句 时 ， 就 在 该 变量 名 后 面 加 上 一 
圆 括号 〈) 即 可 ， 如 下 所 示 : 


SayHello( ) 
findTotal( ); 
displayMenu( ); 


运行 函数 也 称 为 调用 函数 。 在 以 下 代码 清单 4-6 中 ， 三 次 调用 函数 sayHello， 就 会 三 
显示 字符 串 “Hello World!”， 如 下 所 示 : 


>Hello World! 
>Hello World! 
>Hello World! 


代码 清单 4-6 三 次 调用 函数 sayHello 
(http://jsbin.com/vozuxa/edit?js,console) 


var sayHello; 


sayHello = function ( ) { // 定 义 函 数 并 将 其 赋值 给 一 个 变量 
console.log("Hello World!"); 


和 


sayHello( ); // 通 过 在 变量 名 后 面 加 圆 括号 的 方法 来 调用 函数 
sayHello( ); 
sayHello( ); // 多 次 调用 函数 


下 一 个 代码 清单 使 用 函数 findTotal 来 更 新 变量 result， 然 后 在 控制 台 上 显示 整个 算式 : 


元- 工 


> 1000 + 66 = 1066 


代码 清单 4-7 使 用 函数 findTotal 来 显示 整个 算式 


yy (http://jsbin.com/hefuwa/edit?js,console) 
Var numberl1 = 1000; 
var number2 = 66; 
var result; 
varfindTotal; 
findTotal = function ( ) { 
result = numberl + number2; 
}; 
findTotal (); 


console.log(numberl + " + " + number2 + "= "+ result); 


代码 清单 4-8 显示 了 如 何 调用 函数 displayMenu 来 显示 荣 单 。 
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>Please choose an option: 


> (1) Print log 


> (2) Upload file 


> (9) Quit 


var displayMenu; 
displayMenu = fun 


代码 清单 4-8 ”显示 菜单 


(http://jsbin.com/cujozo/edit?js,console) 


ction ( 


) { 


console.log("Please choose an option:"); 
console.log("(1) Print log"); 
( 
( 


console.1log 
console.1log 
}; 


displayMenu(); 


"(2) Upload file"),; 
(9 Quit")s 


在 读者 看 来 ， 使 用 空 的 圆 括号 作为 调用 函数 的 符号 可 能 会 有 些 奇 怪 。 但 是 ， 在 第 5 章 就 
会 看 到 ， 圆 括号 内 并 不 总 是 空 


定义 ”对 于 那些 喜欢 术语 的 人 来 说 ， 


变量 后 面 的 
4.2.4 使 用 函数 的 步 又 


的 。 


可 以 在 这 里 多 学 一 招 : 当 调用 一 个 函数 时 ， 添 加 到 


圆 括号 〈) 称 作 函数 调用 操作 符 。 


表 4-1 罗列 了 定义 函数 和 调用 函数 的 步骤 。 


表 4-1 定义 函数 和 调用 函数 
行 为 代 码 注 释 
声明 变量 var sayHello; 设置 一 个 在 程序 中 使 用 的 变量 名 称 
function () { 
定义 函数 console .log ("Hello World!"); 在 此 阶段 ， 函 数 体内 的 代码 还 不 能 执行 
sayHello = function () { 将 函数 旭 人 够 调用 该 承 当 
将 函数 赋值 给 变量 console .log ("Hello World!"); Pe a 全 变量 就 意味 独 为 程序 能 够 调用 该 函数 
外 发 了 一 张 通行 证 
调用 函数 sayHello () ; 函数 体内 的 代码 得 以 执行 
sayHello () ; 
按 需 多 次 调用 函数 sayHello () ; 函数 体内 的 代码 可 以 多 次 执行 
sayHello (); 


4.3 


的 代 


4.3.1 
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减少 重复 
在 代码 清单 4-2 和 4-3! 


， 我 们 看 到 ， 在 没有 使 用 函数 的 情况 下 ， 各 


HHO 
朗 


存在 大 量 重复 


人 码 块 。 通 过 使 用 函数 ， 可 以 大 大 减少 上 述 章 复 现象 。 


重新 返回 到 代码 清单 4-2 


P 的 代码， 


函数 可 用 于 将 对 象 的 属性 作为 文本 进行 显示 


现在 我 们 用 函数 来 简化 对 电影 信息 的 显示 。 将 显示 
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电影 信息 的 代码 一 次 性 写 入 一 个 函数 ， 然 后 就 可 以 根据 需要 轻松 地 调用 该 函数 。 


入 代码 清单 4-9 使 用 函数 来 显示 对 象 的 属性 
Ds (http://isbin.com/toqopo/edit?js,console) 


var showMovieInfo; 

showMovieInfo = function ( ) { 
console.log("Movie information for " + movie.title); 
CONSOLe: OG (TS ) 字 


( 
( 
console.log("Actors: " + movie.actors); 
( 
( 


console.log("Directors: " + movie.directors); 
EONSOle: lo0g(V = Ts 
}s 
以 上 代码 中 ， 将 一 个 新 函数 分 配给 变量 showMovieInfo， 然 后 通过 该 变量 名 称 后 跟 圆 括 
号 ，showMovieInfo0 来 调用 这 个 函数 ， 如 代码 清单 4-10 所 示 ， 最 终 在 控制 台 上 得 到 以 下 输 


出 ， 与 图 4-1 所 示 目 标 完美 匹配 。 


> Movie information for Inside Out 


> Actors: Amy Poehler, Bill Hader 


> Directors: Pete Doctor, Ronaldo Del Carmen 


晤 代码 清单 4-10 调用 函数 showMovieInfo 
, (http://jsbin.com/menebu/edit?js,console) 


var moviel; 

var showPplayerIinfo; 

var movie,; 

moviel = { 
title: "Inside Out", 
actors: "Amy Poehler, Bill Hader", 
directors: "Pete Doctor, Ronaldo Del Carmen'" 

好 

showMovieInfo = function ( ) { // 定 义 函 数 ， 在 此 阶段 ， 函 数 体内 的 代码 还 不 能 执行 
console.log("Movie information for " + movie.title); 
ConSsole.1log("------------------------------ me 


( 
( 
console.log("Actors: " + movie.actors); 
( 
( 


console.log("Directors: " + movie.directors); 
Onsole: LOg( = Se 天 
movie = moviel,; 


showMovieInfo( ); // 调 用 函数 ， 执 行 函数 体内 的 代码 


在 以 上 代码 中 ， 通 过 使 用 变量 movie 并 调用 函数 showMovieInfo， 可 以 改变 函数 中 电影 
的 信息 。 代 码 清 单 将 三 部 电影 的 信息 显示 在 控制 台 上 
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>Movie information for Inside Out 


>Actors: Amy Poehler, Bill Hader 


>Directors: Pete Doctor, Ronaldo Del Carmen 


>Actors: Daniel Craig, Christoph Waltz 


>Directors: Sam Mendes 


>Actors: Harrison Ford, Mark Hamill, Carrie Fisher 


>Directors: J.J.Abrams 


代码 清单 4-11 多 个 对 象 使 用 同一 个 函数 
(http://jsbin.com/mavutu/edit?js,console) 


Var moviel; 

Var movie2; 

Var movie3; 

var movie; // 声 明 一 个 变量 movie 来 存放 当前 显示 的 电影 
Var showMovieInfo,; 


moviel = { 
title: "Inside Out", 
actors: "Amy Poehler, Bill Hader", 
directors: "Pete Doctor, Ronaldo Del Carmen" 
}; 
movie2 = { 
title: "Spectre", 
actors: "Daniel Craig, Christoph Waltz", 
directors: "Sam Mendes" 
和 
movie3 = { 
title: "Star Wars: Episode VII - The Force Awakens", 
actors: "Harrison Ford, Mark Hamill, Carrie Fisher", 
directors: "J.J.Abrams" 
}; 


showMovieInfo = function ( ) { // 在 函数 showMovieInfo 中 使 用 变量 movie 


console.log("Movie information for " + movie.title) ， 
GONSOLTe: 10g ("2 3 


( 
( 
console.log("Actors: " + movie.actors); 
( 
( 


console.log("Directors: " + movie.directors); 
CONSoOle.. Lod (se Ey 
movie = moviel; // 将 moviel 赋值 给 变量 movie， 为 显示 该 电影 做 准备 


本 
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ShowMovieInfto( ); 

movie = movie2; // 切 换 准 备 显示 的 电影 : movie2 和 movie3 
showMovieInfo( ); 

movie = movie3; 


showMovieInfo( ); 


4.3.2 ”加 税 并 显示 总 成 本 的 函数 


以 下 代码 清单 4-12 显示 了 一 个 为 销售 增加 税额 并 显示 每 笔 交 易 总 成 本 的 函数 。 原 先 大 
段 大 段 重 复 的 代码 都 被 两 个 函数 calculateTax 和 displaySale 蔡 代 ， 针 对 每 个 销售 对 象 依次 调 
有 这 两 个 函数 ， 就 可 以 得 到 以 下 输出 : 


i 


>price = $140 
>tax @ 15% = $21 
>totalcost = $161 
>price = $40 

>tax @ 10% = $4 
>totalcost = $44 
>price = $120 
>tax @ 20% = $24 
>totalcost = $144 


正如 JS Bin 上 所 有 其 他 代码 清单 一 样 ， 在 程序 的 下 面 可 以 看 到 Further Adventures〈 进 阶 
练习 ) ， 在 这 里 ， 对 程序 编写 提出 进一步 优化 的 思考 。 针 对 代码 清单 4-12 的 优化 建议 就 是 
尽量 减少 函数 calculateTax 和 displaySale 一 起 被 调用 的 重复 次 数 。 尽 管 二 者 执行 两 个 不 同 的 
功能 ， 是 否 可 以 避免 每 一 笔 交 易 都 要 调用 这 两 个 函数 ” 如 果 你 可 以 连接 互联 网 ， 请 单 击 代码 
清单 4-12 的 链接 ， 马 上 前 往 JS Bin 去 迎接 挑战 ! 如 果 你 只 是 阅读 本 书 ， 那 实际 上 就 是 远离 
了 技术 。 记 住 ，JS Bin 才 是 你 编程 的 纸 和 笔 ! 本 书 的 在 线 平台 能 够 为 大 多 数 问题 提供 解决 方 
案 ， 链 接 如 下 : www.room51.co.uk/books/getprogramming/listings.html。 


代码 清单 4-12 ”使 用 函数 计 税 并 显示 
Wy (http:/jsbin.com/raqiri/edit?js,console) 


var salel; 
var sale2; 
var sale3; 
var sale; // 先 声明 一 个 变量 sale， 在 后 面 的 函数 中 将 会 使 用 该 变量 


var calculateTax; 


Var displaySale; 
salel = { price: 140, taxRate: 15 }; 
sale2 = { price: 40, taxRate: 10 }; 


sale3 = { price: 120, taxRate: 20 }; 
calculateTax = function ( ) { 


sale.tax = sale.price * sale.taxRate / 100; // 这 里 使 ] 了 变量 sale， 在 后 面 
// 的 函数 displaysale 中 还 会 使 用 该 变量 
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sale.total = sale.price + sale.tax; 
}; 
var displaySale = function ( ) { 
console.log("price = $" + sale.price); 
console.log("tax @ " + sale.taxRate + "$ = $" + sale.tax); 
console.log("totalcost = $" + sale.total); 
二 
sale = salel; // 将 salel 赋值 给 sale， 然 后 就 可 以 调用 下 面 两 个 函数 来 更 新 并 显示 计 税 


calculateTax( ) ; 


QisplaySale( ); 
sale = sale2; 
calculateTax( ); 
QisplaySale( ); 


sale = sale3; 


calculateTax( ) ; 


displaySale( ); 


以 上 代码 在 定义 这 两 个 函数 时 都 使 用 了 变量 sale， 在 访问 对 象 的 属性 sale.price 和 
sale.taxRate 时 也 使 用 了 变量 sale。 在 调用 这 两 个 函数 之 前 ， 函 数 体 中 的 代码 是 不 能 运行 的 ， 
一 直 要 等 到 程序 调用 这 两 个 函数 ， 函 数 体 中 的 代码 才 得 以 运行 。 届 时 ， 程 序 会 将 某 个 销售 对 
象 赋值 给 变量 sale。 

函数 名 称 calculateTax 和 displaySale 可 使 代码 清单 4-12 更 易于 阅读 ， 具 体内 容 将 在 
第 4.4 节 详 述 。 


4.4 使 代码 易于 阅读 和 更 新 


随 着 程序 变 得 越 来 越 长 、 越 来 越 复杂 ， 我 们 可 以 采用 对 对 象 和 函数 适当 命名 的 方式 将 程 
序 分 成 若干 部 分 ， 以 此 来 降低 程序 的 复杂 性 。 这 样 一 来 ， 当 其 他 人 阅读 该 代码 时 ， 就 可 以 跟 
上 编写 者 的 思路 ， 理 解 程序 每 个 部 分 的 意思 和 整体 目的 。 

请 读者 阅读 下 面 的 代码 片段 ， 我 相信 ， 尽 管 读 者 不 知道 该 函数 如 何 工作 的 细节 ， 应 该 也 
能 够 理解 其 大 致意 图 。 


var balance = getAccountBalance( ) ; 
displayBalance( ) ; 

addInterest( ) 

addBonus( ) ; 

SetAccountBalance( ); 
displayBalance( ) ; 


如 上 例 所 示 ， 每 个 函数 都 应 该 具有 单一 、 明 确 的 目标 。 如 果 需 要 研究 某 一 个 函数 ， 就 应 
该 首先 找到 在 何 处 定义 了 该 函数 。 下 面 ， 我 们 来 看 一 个 更 新 函数 的 示例 。 
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4.4.1 更 新 showMovieImfo 函数 


在 前 文 代码 清单 4-11 中 ， 创 建 了 一 个 函数 showMovieInfo 来 显示 某 个 电影 


对 象 的 信 


乱 ， 像 那样 将 显示 代码 块 集成 到 一 个 函数 里 是 非常 好 的 ， 但 是 当 多 个 电影 的 信息 都 混在 一 起 


显示 在 控制 台 上 ， 就 很 难 挑选 出 关于 某 个 特定 电影 的 独特 信息 。 为 了 解决 这 个 问题 ， 我 们 可 


以 通过 添加 空 行 的 办 法 使 每 一 部 电影 的 信息 得 以 清楚 地 显示 ， 如 下 所 示 : 


>Movie information for Inside Out 


>Actors: Amy Poehler, Bill Hader 
>Directors: Pete Doctor, Ronaldo Del Carmen 


>Actors: Daniel Craig, Christoph Waltz 


>Directors: Sam Mendes 


>Movie information for Star Wars: Episode VII - The Force Awakens 


>Actors: Harrison Ford, Mark Hamill, Carrie Fisher 


>Directors: J.J.Abrams 


所 示 。 


和 代码 清单 4-13 更 新 显示 函数 来 增加 一 个 空白 行 
0 (http://jsbin.com/cijini/edit?js,console) 


showMovieInfo = function () { 
console.log("Movie information for " + movie.title); 


CONSOlTes 1oOg (=e Wy 


( 

( 
console.log("Actors: " + movie.actors); 
console.log("Directors: " + movie.directors); 
CONSOL e109 ("ss 1 
console.1o0g(""); / /添加 额外 的 一 行 来 调用 console .1og， 从 而 创建 


}3 


请 仔细 看 ! 因为 JS Bin 控制 台 上 用 引号 "来 显示 字符 串 的 左右 端 ， 所 以 并 没有 真正 
看 到 空白 行 ， 而 是 看 到 一 个 中 间 内 容 为 空 的 引号 "。 但 是 如 果 使 用 浏览 器 (参见 在 线 指 


个 空 自行 


因为 代码 清单 4-11 中 所 有 的 显示 代码 都 集成 在 函数 showMovieInfo 里 ， 因 此 可 以 直接 
在 其 函数 体内 部 添加 额外 的 一 行 来 调用 console.log， 从 而 显示 一 个 空白 行 ， 如 代码 清单 4-13 


南 www.room51.co.uk/guides/browser-consoles.html)， 就 会 看 到 预期 的 空白 行 ， 如 图 4-3 


所 示 。 
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HIML CSsS JavaScript Console Output 鲍 accour: ece rep 


ce Awakens" 
rie Fisher™ 


ovie.title); 
一 -3 


图 4-3 JS Bin 控制 台 显 示 带 引号 的 空 字符 串 ， 而 浏览 器 显示 则 无 引号 


如 有 果 以 上 例子 来 自 一 个 更 大 的 程序 ， 假 如 我 们 没有 让 玩家 的 信息 按照 一 定 迪 辑 风 套 在 也 
数 里 ， 那 么 当 我 们 要 对 某 些 内 容 进 行 修改 时 ， 就 必须 仔细 检查 所 有 代码 ， 才 能 找到 应 该 进行 
更 改 的 代码 行 。 文 本 编辑 器 和 开发 环境 虽然 能 够 为 我 们 的 修改 提供 一 些 帮助 工具 ， 但 并 不 能 
做 到 万 无 一 失 ， 最 终 程 序 有 可 能 就 是 因为 这 些 未 纠正 的 代码 而 无 法 运行 。 你 可 以 自己 试 一 
试 ， 刚 开始 程序 很 得， 似乎 一 切 都 很 好 ， 然 后 随 着 程序 变 长 ， 问 题 就 来 了 。 为 了 避免 这 样 的 
梦 ， 还 是 选择 使 用 函数 吧 ! 


于 


Eg 
lula 


4.5 游戏 The Crypt 一 一 显示 玩家 的 信息 


在 本 节 中 ， 将 要 把 读者 在 本 章 所 学 JavaScript 函数 的 知识 应 用 到 游戏 The Crypt 中 。 如 
图 4-4 所 示 ， 本 节 的 重点 是 通过 使 用 函数 显示 玩家 的 信息 。 


Players Places Maps 
player variables place objects linking places 
using functions 
a player object place items Game 


Using arguments 
showing player info place exits render 


Using return values 
player items showing place info get 
using objects 
Player Constructor Place Constructor go 


图 4-4 ”The Crypt 中 的 游戏 元 素 


在 第 3 章 中 ， 我 们 看 到 如 何 将 一 个 玩家 的 信息 分 组 构成 一 个 JavaScript 对 象 。 我 们 使 
花 括号 创建 对 象 ， 并 使 用 键 - 值 对 为 对 象 设置 属性 ， 如 下 所 示 ; 


LU 


var player; 
player = { 
name: "Kandra", 
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health: 50, 


place: "The Dungeon of Doom" 
}; 
旦 将 新 对 象 赋值 给 变量 player 后 ， 即 可 使 用 圆 点 运算 符 来 获取 该 变量 的 属性 值 ， 并 将 
该 玩家 的 信息 显示 在 控制 台 上 : 


可 


邢 


console.log(player.name + " is in " + player.place); 


在 游戏 中 ， 可 能 需要 多 次 显示 多 个 玩家 的 信息 ， 这 就 需要 我 们 使 用 本 章 的 函数 新 知识 来 
更 加 高 效 地 显示 信息 。 函 数 既 然 是 按 需 代码 ， 那 就 意味 着 我 们 在 需要 时 可 以 通过 调用 函数 来 
执行 代码 。 


4.5.1 用 函数 显示 玩家 的 信息 


在 4.4.1 节 ， 代 码 清 单 4-13 中 的 函数 showMovieInfo 看 起 来 正 是 我 们 所 需要 的 这 种 函 
数 。showMovieInfo 显示 关于 电影 的 信息 ， 以 下 代码 清单 4-14 中 的 函数 showPlayerInfo 显示 
的 是 与 此 类 似 的 游戏 玩家 信息 ， 在 控制 台 上 输出 如 下 : 


>Kandra 


>Kandra is in The Dungeon of Doom 
>Kandra has health 50 


>Dax is in The Old Library 
>Dax has health 40 


代码 清单 4-14 ”用 函数 显示 玩家 的 信息 
0 (http:/jsbin.com/mafade/edit2js,console) 


Var playerl; // 声 明 变 量 
var player2; 


var player; 
Var showPplayerIinfo,; 
playerl = { // 使 用 花 括号 和 键 - 值 对 创建 对 象 ， 并 将 其 赋值 给 变量 


name: "Kandra", 


place: "TheDungeonofDoom", 
health: 50 

类 

player2 = { 
name: "Dax", 
place: "TheOldLibrary", 
health: 40 
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}; 
showPlayerIinfo = function () { / /定义 一 个 函数 来 显示 玩家 的 属性 。 当 调 上 
// 数 时 ， 执 行 函数 体 的 代码 

console.1log (player.name); 
CONnsole.1odg ("Ss = ye 
console.log(player.name + " is in " + player.place); 
console.log(player.name + " has health " + player.health),; 
GOnsole. L169g ("= ny 
console.1og(""); 

}; 


player = playerl; // 将 一 个 玩家 对 象 player1l 赋值 给 玩家 变量 player， 以 便 函 数 可 


// 以 访问 到 它 
showPlayerInfo(); // 调 用 函数 来 显示 玩家 对 象 的 属性 


player = player2; // 将 另 一 个 玩家 对 象 player2 赋值 给 玩家 变量 player 


showPlayerInfo(); // 再 次 调用 函数 ， 这 是 必需 的 代码 


非常 棒 ! 现在 只 需要 简单 地 调用 一 下 函数 就 可 以 显示 玩家 的 信息 了 。 但 是 依然 还 有 点 儿 麻 
如 果 能 以 某 种 方式 对 函数 


烦 ， 我 们 必须 一 次 又 一 次 地 把 每 一 个 不 同 的 玩家 赋值 给 变量 player。 
直接 说 ,“ 显 示 playerl 的 信息 ”或 “显示 player2 的 信息 ” 那 就 更 好 了 ! 关于 如 何 向 函数 传 入 


和 传 出 信息 ， 本 书 将 在 后 续 三 草 中 详细 论述 。 我 们 的 目标 是 使 程序 更 加 有 灵活、 高 效 、 


4.6 本章 小 结 


可 复种 


中 


图 函数 是 一 次 编写 但 可 以 多 次 使 用 的 代码 块 。 每 个 函数 应 该 具有 明确 、 单 一 的 目的 。 


图 定义 函数 需要 使 用 关键 字 function、 圆 括号 以 及 圆 括号 中 间 的 代码 《项 


function ( ) { 


// 函数 体内 的 语句 


}; 
加 使 用 等 号 将 函数 赋值 给 变量 ， 等 号 也 称 为 赋值 运算 符 : 


showPlayerIinfo = function () { ... }; 


函数 体 ): 


图 一 旦 将 函数 赋值 给 一 个 变量 ， 就 可 以 调用 该 函数 。 调 用 函数 的 方法 是 在 变量 名 后 面 


添加 圆 括号 : 


addTax () ; 
showPlayerInfo () ; 
evadeRaptor () :; 


国 寻找 重复 性 代码 ， 或 者 结构 相同 ， 仅 仅 值 或 变量 有 轻微 变化 的 代码 段 ， 然 后 将 重复 


的 代码 放 到 一 个 函数 中 。 
图 为 函数 起 一 个 清楚 明了 的 名 称 ， 使 程序 更 容易 阅读 和 


佳 护 。 
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本 章 内 容 包 括 : 
图 使 用 形 参 (parameters ) 定义 函数 ， 为 传 入 数据 做 好 准备 
图 使 用 实 参 (arguments ) 调用 函数 ， 为 函数 传 入 数据 


函数 是 组 织 程序 代码 的 一 个 重要 手段 ， 只 需要 一 次 性 编写 函数 代码 ， 之 后 就 可 以 多 次 使 
用 该 函数 。 ， 函数 都 是 和 它 所 赋值 的 变量 绑 定 在 一 起 使 用 。 从 本 章 开始 ， 我 们 可 
以 自由 地 设置 函数 ， 让 函数 命名 自己 的 变量 ， 并 且 程 序 还 可 以 将 需要 的 数据 传递 给 函数 。 


5.1 函数 重用 


在 本 章 之 前 ， 我 们 使 用 函数 时 总 是 依赖 于 函数 之 外 的 一 个 变量 ， 而 对 该 变量 的 声明 和 赋 
值 是 在 程序 的 其 他 地 方 。 在 以 下 代码 清单 5-1 中 ， 函 数 showMessage 依赖 于 一 个 名 为 
message 的 变量 ， 而 对 message 变量 的 声明 并 不 在 函数 定义 的 过 程 中 ， 函 数 定义 和 变量 声明 
分 别 存 在 于 程序 的 不 同位 置 。 


上 


二 洒 代码 清单 S-1 函数 依赖 于 函数 之 外 的 另 一 个 变量 
Wy (http://jsbin.com/taqusi/edit?js,console) 


var message; 
var showMessage; 
message= "It's full of stars!"; // 将 欲 显示 的 字符 串 赋 1 


showMessage = function () { 


console.1og (message) ; // 在 函数 体内 使 用 变量 message， 该 变量 在 函数 之 前 已 经 定义 


给 变量 message 


上 
showMessage () ; // 调 用 函数 showMessage， 在 该 函数 中 使 用 变量 message 当前 的 值 


在 showMessage 函数 定义 中 ， 使 用 了 一 个 名 为 message 的 变量 。 使 用 一 个 变量 的 前 提 是 
已 经 声明 过 该 变量 ， 然 后 才能 为 函数 所 使 用 。 如 果 该 变量 的 名 称 被 修改 ， 那 么 该 函数 就 不 能 
再 使 用 这 个 变量 了 。 例如 变量 message 被 重新 命名 为 msg， 如 以 下 代码 清单 5-2 所 示 ， 在 JS 
Bin 上 运行 程序 ， 就 会 得 到 一 个 错误 信息 : “Reference error: Can't find variable: message”( 不 
同 浏览 器 显示 的 错误 信息 可 能 会 略 有 不 同 )。 


SB 代码 清单 5-2 ”更 改变 量 名 导致 函数 无 法 正常 运行 
(http://jsbin.com/yaresa/edit?js,console) 


var msg; 
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var showMessage; 


msg= "It's full of stars!"; // 将 欲 显 示 的 字符 串 赋值 给 变量 msg 
showMessage = function () { 

console.log (message); // 在 函数 体内 使 用 一 个 名 为 message 的 变量 
| 
showMessage () ; // 调 用 函数 showMessage， 产 生 了 错误 


函数 体内 的 指令 确实 可 以 使 用 在 程序 中 其 他 位 置 已 经 声明 过 的 变量 ， 但 是 这 样 做 就 造成 
了 函数 与 外 部 变量 之 间 的 绑 定 关系 。 当 该 变量 发 生变 化 时 ， 函 数 也 必须 随 之 做 出 相应 的 变 
化 ， 否 则 就 会 出 错 ， 显 然 这 不 是 使 用 函数 的 理想 状态 。 下 面 介绍 一 种 更 好 的 方法 ， 在 这 种 方 
法 中 ， 只 有 在 调用 函数 时 ， 才 将 函数 需要 的 信息 传递 给 该 函数 。 以 上 做 法 有 助 于 避免 函数 需 
要 的 变量 发 生 错误 命名 、 丢 失 、 删 除 或 者 在 程序 的 其 他 部 分 更 改 等 情况 ， 这 样 做 还 有 助 于 使 
程序 更 加 易 读 ， 而 且 在 出 错时 更 容易 找到 错误 。 
如 同 摇滚 歌星 在 出 场 之 前 一 定 要 在 更 衣 室 内 隆重 着 装 ,我 们 一 直 以 来 所 使 用 的 函数 中 的 
变量 在 使 用 之 前 也 必须 事先 声明 ， 这 样 傲慢 的 函数 并 不 讨 人 喜欢 。 我 们 更 喜欢 有 亲和力 的 歌 
手 ， 他 们 随时 随地 都 乐意 出 场 表 演 。 通 过 去 除 函 数 和 变量 之 间 的 上 述 绑 定 关系 ， 可 以 使 函数 
更 加 独立 ， 便 于 在 不 同 程序 间 多 次 使 用 ， 而 不 会 引发 错误 。 

那么 ， 如 何 去 除 函数 和 变量 之 间 的 绑 定 关系 ? 


5.2 ”将 信息 传递 给 函数 


将 信息 传递 给 函数 分 两 步 进行 : 定义 函数 和 调用 函数 。 

(1) 定义 函数 : 设置 变量 名 称 ， 该 变量 名 可 以 称 为 形 参 ， 作 用 是 为 下 一 步调 用 函数 做 好 
准备 。 

(2) 调用 函数 : 为 以 上 在 步 又 〈1) 中 命名 的 形 参 传 入 数据 。 

在 本 章 ( 甚 至 在 整 本 书 ) 的 所 有 示例 中 ， 都 没有 关于 如 何 设置 以 上 参数 的 练习 。 但 
是 ,在 JS Bin 上 ， 每 个 代码 清单 的 Further Adventures 部 分 都 可 以 看 到 关于 设置 参数 的 
练习 。 


5.2.1 将 实 参 传递 给 函数 


现在 ， 我们 使 用 空 的 圆 插 号 来 定义 函数 。 为 了 在 调用 函数 时 能 够 将 信息 传递 到 该 函数 ， 
可 以 将 该 信息 放 在 辆 括号 之 间 ， 如 下 所 示 : 


showMessage ("It's full of stars!"),; 
showPlayerIinfo ("Kandra").; 
getMovieActors ("The Hobbit"); 
square (12) ; 


在 以 上 示例 中 ， 我 们 向 上 述 四 个 函数 分 别传 递 了 一 些 信 息 供 其 函数 代码 使 用 。 每 一 个 包 


括 在 圆 括 号 中 的 值 称 为 实 参 。 上 述 每 一 个 函数 都 包含 一 个 实 参 ， 分 别 是 “It's full of stars!”、 
“天 andra”、 “The Hobbit* 和 和 12。 
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在 使 用 以 上 圆 括号 中 的 信息 


之 前 ， 必 须 确保 函数 已 经 做 好 准备 来 接受 这 些 信 息 。 


第 5 章 参数 : 将 数据 传递 给 函数 


我 们 可 


以 在 定义 函数 时 添加 形 参 ， 形 参 表明 该 函数 期 望 在 调用 该 函数 时 给 它 传递 一 些 信息 ， 
如 图 5-1 所 示 。 
形 参 
function (param1) { 
param1l 是 函数 体 中 
的 一 个 变量 


图 5-1 


义 函 数 时 将 形 参 放 在 辆 括号 内 


对 于 上 述 示例 中 的 4 个 函数 ， 其 函数 定义 大 致 如 下 所 示 : 


showMessage = function (message) { ... }; 
showPlayerIinfo = function (playerName) { . }; 
getMovieActors = function (movieTitle) { ... }; 
square = function (numberToSquare) { . }; 


内 部 使 用 。 
对 于 前 文 代码 清 


3-11 


上 述 每 个 函数 定义 中 都 包括 一 个 参数 ， 


以 粗 体 显 示 。 该 参数 是 一 个 变量 ， 只 能 在 函数 体 


函数 showMessage 内 容 的 更 新 ， 我 们 不 必 再 依赖 于 外 部 变量 ， 


是 采用 更 新 showMessage 函数 的 方法 来 接受 新 消息 。 首 先 ， 在 定义 函数 时 要 包括 一 个 参数 


数 体 中 的 变量 
内 ，showMessage ("It's full of stars!" 


本 ， 显示 如 下 : 


Message， 该 参数 是 函 


Tt Stull 


代码 清单 5-3 ”将 信息 传递 给 函 


> The message is: 


> 
加 


var showMessage; 
showMessage = 


console.log("The message 


} 


ShowMessage ("It's full of stars!"); 


在 代码 清单 5-3 的 结尾 处 ， 调 用 
在 圆 括号 内 。 像 以 上 示例 中 这 样 ， 
赋值 给 变量 message， 然 后 函数 使 用 变量 
message1s: It'sfullofstars!" 

表 5-1 显示 了 具体 步 
j 疯 数 。 


function (message){ 


又 ， 教 你 如 何 定义 一 个 带 有 形 参 


。 然后， 当 调 用 该 函数 时 ， 将 要 显示 的 信息 放 在 圆 括号 
) 。 这 个 函数 与 代码 清单 5-1 相 比 ， 增 添 了 额外 的 文 


of stars! 


数 


(http://jsbin.com/xucemu/edit?js,console) 


// 在 定义 函数 时 要 包括 一 个 参数 message 
数 内 使 用 message 


is: " + message); // 在 函 


//"It's full of stars!" 传 递 给 Message， 
// 函 数 体内 的 语句 得 以 执行 


ShowMessage 函数 时 ， 将 字符 串 "It's foll of stars !" 放 
在 函数 调用 时 放 在 圆 括 号 内 的 值 称 作 实 参 。 程 序 将 此 参数 


message 来 生成 字符 串 》 


显示 在 控制 台 上 ， 


"The 


的 函数 ， 然 后 使 用 不 同 的 实 参 来 调 


31 


59 


JavaScript 开发 实战 


表 5-1 定义 和 调用 函数 〈 传 递 数据 给 函数 ) 的 步骤 


动 作 代 码 注释 
声明 变量 Var showMessage; 命名 一 个 变量 以 备 在 程序 中 使 
定义 一 个 含 参 函 数 a (message) { 命名 变量 message， 以 备 在 函数 体内 使 用 
function (message){ 
网 用 参数 console-log(message); 参数 是 在 函数 体内 可 用 的 变量 
} 
showMessage = function (message){ 
将 函数 赋值 给 变量 console.log(message); 将 函数 赋值 给 变量 以 备 后 续 调 用 该 函数 
} 
将 圆 括号 内 的 参数 赋值 给 ， 执 行 函 类 
用 实 参 来 调用 函数 showMessage("It's full of stars!"); 将 和 内 的 参数 赋值 给 message， 执 行 函数 
体 内 的 IE 有 
使 用 不 同 的 实 参 多 次 调 showMessage("It's full stars!"); 每 次 调用 该 函数 时 ， 就 赋予 message 不 同 的 
函数 showMessage("Yippee!"); 实 参 


showMessage("Cowabunga!"); 


如 上 所 述 ， 我 们 可 以 使 用 自己 选择 的 任何 文本 内 容 来 调用 showMessage 函数 ， 将 该 文本 
赋值 给 message， 并 作为 完整 消息 的 一 部 分 显示 在 控制 台 上 。 

在 代码 清单 5-4 中 ， 使 用 三 个 不 同 的 参数 调用 showMessage 函数 ， 导 致 控制 台 上 显示 了 
三 条 不 同 的 信息 : 


T 


> The message is: It's full of stars! 
> The message is: Hello to Jason Isaacs 


> The message is: Hello to Jason Isaacs and Stephen Fry 


代码 清单 5-4 使 用 不 同 的 参数 调用 同一 个 函数 


(http://jsbin.com/zavavo/edit?js,console) 


var showMessage; // 声 明 一 个 变量 
showMessage = function (message){ // 用 形 参 message 定义 函数 ， 并 将 该 函数 赋值 
// 给 变量 


console.log("The message is: " + message) ;// 在 函数 体内 使 用 参数 message 
和 
ShowMessage ("It's full of stars!"); 
showMessage ("Hello to Jason Isaacs'"),; 
showMessage ("Hello to Jason Isaacs and Stephen Fry'"); // 每 次 用 不 同 的 实 
// 参 调用 该 函数 


正 是 因为 在 定义 函数 的 同时 声明 了 形 参 的 名 称 ， 函 数 showMessage 不 再 依赖 于 程序 的 其 
他 地 方 来 声明 变量 ， 因 此 成 功 去 除了 函数 和 变量 之 间 的 绑 定 关系 。 
代码 清单 5-5 0 包含 一 个 形 参 numberToSquare。 函 数 将 传递 给 它 的 
数字 作为 实 参 进行 平方 运算 。 四 次 调用 该 函数 得 到 以 下 输出 : 


压 


> 10 * 10 = 100 

> -2 * -2 = 4 

> 1111 * 1111 = 1234321 
> 0.5 * 0.5 = 0.25 
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和 。 代码 清单 5-5 使 用 平方 函数 
Me (http://jsbin.com/vequpi/edit?js,console) 


Var square; 
square = function (numberToSquare) { 
Var result; 
result = numberToSquare * numberToSquare; // 数 值 乘 以 自身 得 到 平方 数 ，* 是 
// 乘 法 运算 符 
console.log(numberToSquare + " * " + numberToSquare + " = " + result); 
后 


square (10) ; 


L111); 
5); 


( 
square (-2) ; 
Sdcuare (人 

(0 


square 
形 参 与 实 参 Ss 
我 们 早 就 知道 ， 圆 括号 终究 会 派 上 用 场 ! 
在 定义 函数 时 ， 圆 括号 内 的 名 称 可 以 作为 变量 在 函数 体 中 使 用 ， 我 们 称 之 为 形 参 ， 我 
们 期 望 在 调用 函数 时 也 使 用 该 信息 ， 如 下 所 示 : 


var myExample; 


myExample = function(parameter){...} 


在 调用 池 数 时 ， 将 国 括 号 中 的 值 传递 给 形 参 ， 并 在 函数 体 中 运行 ， 我 们 把 调用 函数 时 
国 括 号 中 的 值 称 为 实 参 ， 如 下 所 示 : 


myExample (argument)，; 


请 读者 不 必 过 分 担心 这 些 术 语 ， 可 能 需要 一 段 时 间 才 能 习惯 使 用 这 些 术 语 。 其 实在 练 
dan da 要 就 会 对 形 参 和 实 参 有 一 个 直观 的 认识 ， 到 那 时 ， 即 便 有 时 还 


5.2.2 将 多 个 实 参 传递 给 一 个 函数 


可 以 根据 需要 ， 在 定义 一 个 函数 时 使 用 多 个 形 参 。 具 体 做 法 就 是 在 定义 函数 的 圆 插 号 中 
用 逗号 来 分 隔 多 个 形 参 ， 如 图 5-2 所 示 。 
多 个 形 参 


function (paraml, param2, param3) { 
paraml. param2 和 param3 


都 可 作为 函数 体 中 的 变量 


图 5-2 在 定义 一 个 函数 时 包括 多 个 形 参 


假设 我 们 需要 一 个 函数 来 将 两 个 数字 相 加 。 例 如 这 两 对 数字 分 别 是 30 和 23， 以 及 2.8 
和 -5$， 正 确 的 输出 应 该 是 : 
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> The sum is 53 
> The sum is -2.2 


该 如 何 编写 代码 ? 


代码 清单 5-6 和 带 有 两 个 实 参 的 函数 
(http://jsbin.com/siyelu/edit?js,console) 


Var showSum; 
showSum = function (numberl，number2) { // 在 定义 函数 时 使 用 两 个 形 参 : number1 
// 和 number2 


var total = numberl + number2,; 
console.log("The sum is " + total); 


}; 
howSum (30，23); ”// 使 用 两 个 实 参 调用 该 函数 : 30 和 23 
showSum(2.8, -5); 


当 调 用 函数 showSum 时 ， 程 序 会 自动 将 两 个 实 参 赋 值 给 定义 函数 时 的 两 个 形 参 : 
numberl 和 number2 。 在 代码 清单 5-6 中 ， 第 一 次 调用 函数 showSum 时 ， 函 数 体 就 变 成 为 : 


on 


var numberl1l = 30; 

var number2 = 23; 

var total = numberl + number2,; 
console.log("The sum is " + total); 


我 们 在 定义 函数 时 可 以 随心 所 欲 地 使 用 很 多 的 形 参 。 但 是 随 着 形 参数 量 的 增加 ， 其 他 人 
(也 包括 你 自己 !) 在 使 用 函数 时 可 能 更 容易 出 错 ， 有 可 能 会 丢掉 一 个 实 参 或 者 在 调用 函数 时 


将 实 参 的 顺序 搞 错 。 为 了 解决 这 个 问题 ， 我 们 可 以 采用 一 个 简便 方法 ， 就 是 将 对 象 传 递 给 函 
数 。 在 定义 函数 时 ， 只 需要 一 个 形 参 ， 函 数 体 可 以 访问 对 和 象 的 任何 一 个 属性 。 在 后 续 第 7 
章 ， 读 者 将 学 习 和 使 用 这 种 带 有 对 象 的 函数 。 


5.3 ”The Crypt 一 一 显示 玩家 信息 


在 本 节 中 ， 我 们 把 刚刚 学 到 的 JavaScript 带 参 函数 的 知识 应 用 到 游戏 The Crypt 去 。 
5-3 显示 了 本 节 的 重点 : 通过 使 用 带 参 函数 来 显示 玩家 信息 。 


Players Places Maps 


而 


player variables place objects linking places 
using functions 
a player object place items Game 
using arguments 
showing player info place exits render 
using return values 
player items showing place info get 
using objects 
Player Constructor Place Constructor go 


图 5-3 The Crypt 中 的 游戏 元 素 
章 中 ， 我 们 编写 了 一 个 函数 showPlayerInfo， 在 需要 时 可 以 调用 该 函数 将 玩家 信 


了 
村 
人 
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县 显示 在 控制 台 上 。 但 是 该 函数 的 存在 依赖 于 程序 中 其 他 地 方 已 经 定义 好 的 变量 player， 现 
在 我 们 通过 设置 参数 ， 并 向 其 直接 传递 所 需 信息 的 方法 来 更 新 函数 showPlayerInfo。 
为 了 显示 每 一 位 玩家 的 多 方面 信息 ， 可 以 为 每 位 玩家 的 每 条 信息 创建 一 个 函数 ， 如 下 所 示 : 


showPlayerName ("Kandra"),; 
showPlayerHealth ("Kandra", 50); 


showPlayerPlace ("Kandra", "The Dungeon of Doom'" ) ; 


以 上 每 一 个 函数 都 有 明确 的 内 容 。 如 果 同 时 显示 所 有 信息 ， 可 以 将 所 有 子 函数 打包 成 一 
个 主 函 数 ， 然 后 将 其 需要 的 所 有 信息 传递 给 主 函 数 ， 如 下 所 示 : 


showPlayerinfo("Kandra", "The Dungeon of Doom", 50); 


在 后 续 儿 节 内 容 中 ， 我 们 定义 了 四 个 函数 和 若干 玩家 对 象 。 前 三 个 函数 非常 相似 ， 请 关 
注 它 们 的 异同 点 ， 并 注意 如 何在 定义 函数 时 使 用 形 参 ， 在 调用 函数 时 使 用 实 参 。 
5.3.1 显示 玩家 的 姓名 


第 一 个 函数 用 于 显示 玩家 的 姓名 ， 并 无 其 他 功能 。 以 下 代码 清单 显示 如 何 定义 函数 
showPlayerName， 并 用 两 个 不 同 的 姓名 参数 来 调用 该 函数 ， 输 出 以 下 内 容 : 


>Kandra 


>Dax 
到 代码 清单 5-7 显示 一 个 玩家 的 姓名 
MW (http://jsbin.com/yubahi/edit?js,console) 


var showPplayerName; 


showPlayerName = function (playerName){ / /在 定义 函数 时 包含 一 个 ] 


形 参 playerName 
console.1og (playerName); // 调 用 函数 时 给 形 参 赋值 并 显示 该 值 
}; 


showPlayerName ("Kandra"),; 


showPlayerName ("Dax"); 


在 真正 的 The Crypt 程序 中 ， 可 能 不 会 使 月 
数 ， 而 是 使 用 变量 来 调用 函 

代码 清 

代码 清单 5-8 ”通过 对 象 属性 来 显示 玩家 的 姓名 
O08 (http://jsbin.com/juhewi/edit?js,console) 


j"Kandra" 和 "Dax" 来 调用 showPlayerName 函 
数 。 特 别 值得 一 提 的 是 ， 可 以 使 用 对 象 代表 各 个 玩家 。 在 下 一 个 
单 中 ， 就 是 使 用 两 个 玩家 对 象 playerl 和 player2 来 更 新 程序 。 


Var playerl]l; 

var player2; 

var showPplayerName; 

showPlayerName = function (playerName) { 
console.1log (playerName); 

}; 


playerl = { 
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以 上 是 对 玩家 姓名 的 显示 ， 下 面 将 显示 玩家 的 健康 值 。 


name: "Kandra", 
place: "The Dungeon of Doom", 
health: 50 
请 
player2 = { 
name: "Dax", 
place: "The Old Library", 
health: 40 
}; 
showPlayerName (player1l.name) ;  // 将 玩家 的 姓名 作为 参数 传递 给 函数 showPlayerName 
showPlayerName (player2 .name) ; 


5.3.2 显示 玩家 的 健康 值 


EE 以 下 代码 清单 中 ， 函 数 showPlayerHealth 定 包 售 广 形 参 ， 
在 以 下 代码 清单 中 ， 函 数 showPlayerHealth 定义 中 包含 了 两 个 形 参 ，playerName 和 
playerHealth， 输 出 如 下 : 


>Kandra has health 50 
>Dax has health 40 


代码 清单 5-9 显示 玩家 的 健康 值 


(http://jsbin.com/nomija/edit?js,console) 


Var showPlayerHealth; 
showPlayerHealth = function (playerName, playerHealth) { // 在 定义 函数 时 
// 包 全 两 个 形 参 : 
//playerName 和 上 playerHealth 
console.log(playerName + " has health " + playerHealth); 


| 
showPlayerHealth ("Kandra", 50); // 为 形 参 赋值 来 生成 供 显示 的 字符 串 
showPlayerHealth ("Dax", 40); 


在 代码 清单 5-9 中 ， 调 用 函数 时 使 用 了 字面 值 "Kandra" 和 50。 在 下 一 个 代码 清单 中 ， 将 每 
一 个 玩家 的 信息 赋值 给 玩家 对 象 的 各 个 属性 。 事 实 上 ， 我 们 在 调用 函数 时 ， 更 倾向 于 使 用 这 些 


属性 ， 而 不 是 使 用 这 样 的 字面 值 。 代 码 清单 5-10 就 是 使 用 玩家 对 象 对 程序 进行 了 更 新 。 


py 
=> 


6 


代码 清单 5-10 ”通过 对 象 属性 来 显示 玩家 的 健康 值 
(http://jsbin.com/zufoxi/edit?]js,console) 


var playerl; 

var player2; 

var showPplayerHealth; 

showPlayerHealth = function (playerName, playerHealth) { 
console.log(playerName + " has health " + playerHealth); 

}; 


Playerl = { 


第 5 章 
name: "Kandra", 
place: "The Dungeon of Doom", 
health: 50 


} 


player2 = { 


name: "Dax", 
place: "The Old Library", 
health: 40 


ji 
showPlayerHealth (playerl .name, playerl.health);//) 
ad 


将 数据 传递 给 函数 


各 每 一 位 玩家 的 姓名 和 健康 值 
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属性 作为 参数 传递 给 函数 


//showPplayerHealth 


showPlayerHealth (player2.name, player2.health),; 


ml 


我 们 已 经 学 会 如 何 显示 玩家 的 姓名 和 健康 值 ， 只 剩 下 位 置信 息 还 未 显示 。 


5.3.3 ”显示 玩家 的 位 置 


在 以 下 代码 清单 5-11 中 ， 对 函数 showPlayerPlace 的 定义 也 包含 了 两 个 参数 : 


playerName 和 playerPlace， 将 输出 以 下 信息 : 


>Kandra is in The Dungeon of Doom 
>Dax is in The Olgd Library 


和 3 ”代码 清单 5-11 显示 玩家 的 位 置 
(http://jsbin.com/yifahe/edit?js,console) 


var showPplayerpPlace; 


ShowP1ayerPlace = function (playerName, 


playerplace) { 


console.log(playerName + " is in " + PlayerPlace) ; 


showPlayerplace ("Kandra", 


showPlayerPplace ("Dax", "The Old Library"); 


"The Dungeon of Doom"); 


i 


以 下 代码 清单 5-12 是 代码 清单 5-11 的 更 新 版 本 ， 殿 


代码 清单 5-12 ”通过 对 象 属性 显示 玩家 的 位 置 
(http://jsbin.com/mejuki/edit?js,console) 


E> 


Var playerl]l; 

var player2; 

Var showPplayerPlace; 
function 


showPplayerPlace = (playerName, 


console.log(playerName + " is in " + playerp 
}; 


Playerl = { 


name: "Kandra", 
place: "The Dungeon of Doom", 
health: 50 


FP 使 用 了 对 和 象 属性 ， 


而 非 学 面值 。 


playerpPlace) { 


lace); 
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} 
player2 = { 
name: "Dax", 
place: "The Old Library", 
health: 40 
}; 
showPplayerPlace (playerl.name, playerl.place); 
showPlayerPlace (player2.name, player2.place); 


我 们 看 到 ， 为 了 分 别 显示 玩家 的 姓名 、 健 康 值 和 位 置信 息 ， 总 共 需 要 使 用 三 个 函数 。 下 


面 我 们 将 把 这 三 个 函数 合并 为 一 个 函数 。 


5.3.4 ”合并 显示 玩家 的 信息 


函数 showPlayerInfo 使 用 了 三 个 相互 独立 的 函数 : showPlayerName、showPlayerHealth 
和 showPlayerPlace， 并 且 增 加 了 一 些 格式 来 显示 每 一 位 玩家 的 属性 ， 输 出 信息 如 下 所 示 ; 


bE 


>Kandra 


>Kandra is in The Dungeon of Doom 
>Kandra has health 50 


以 下 代码 清单 为 了 聚焦 显示 新 函数 showPlayerInfo， 删 减 了 以 上 三 个 独立 的 函数 ， 不 过 


在 JS Bin 上 并 未 删 减 。 


3 ”代码 清单 5-13 ”显示 一 个 玩家 的 信息 
08 (http://jsbin.com/likafe/edit?js,console) 


var showPlayerIinfo; 


showPlayerIinfo = function (playerName, playerPlace, playerHealth) { 


console.1o0g(""); 


showPlayerName (playerName); 
GONSOle :109 ("= 1) 


ShowP1ayerPlace (playerName, playerPplace); 
showPplayerHealth (playerName, playerHealth); 
EONSOLE.. L109g ("= > 


console.1o0g(""); 
showPlayerIinfo('"Kandra", "The Dungeon of Doom", 50); 
showPlayerIinfo("Dax", "The Old Library", 40);，; 


在 上 述 代码 中 ， 每 次 使 用 三 个 参数 来 调用 函数 ， 分 别传 递 给 函数 showPlayerName、 


showPlayerHealth 和 showPlayerPlace。 以 下 代码 清单 5-14 中 ， 将 所 有 的 信息 集合 在 


起 ， 包 


括 每 一 个 变量 声明 和 每 一 步 变 量 赋 值 ， 并 使 用 了 玩家 对 象 属性 ， 例 如 playerl .name， 而 不 是 
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字面 值 "Kandra" 来 调用 函数 showPlayerInfo.。 


代码 清单 5-14 ”使 用 属性 显示 玩家 的 信息 
器 (http://jsbin.com/loteti/edit?js,console) 


var showPlayerName = function (playerName) { 
console.log (playerName),; 


Var showPlayerHealth 


function (playerName, playerHealth) { 
console.log(playerName + " has health " + playerHealth),; 
局 


var showPlayerPlace = function (playerName, playerPlace) { 


console.log(playerName + " is in " + PlayerPlace) ; 
} 
var showPlayerIinfo = function (playerName, playerPlace, playerHealth) { 

console.1og(""); 

showPlayerName (playerName); 


CONSOLE 09 ("= == 1 
ShowP1ayerPlace (playerName, playerpPlace); 
showPlayerHealth (playerName, playerHealth); 


console.log("---------------------------- 1); 


console.1og(""); 
}; 
var playerl1 = { 
name: "Kandra", 
place: "The Dungeon of Doom", 
health: 50 
}; 
var player2 = { 
name: "Dax", 
place: "The Old Library", 
health: 40 
和 
showPlayerIinfo(playerl.name, playerl.place, playerl.health); 
showPlayerIinfo(player2.name, player2.place, player2.health); 


5.4 ”本 章 小 结 


国 定义 一 个 带 参 函数 ， 表 明 将 在 调用 函数 时 ， 把 数据 传递 给 该 函数 。 圆 括号 内 的 多 个 
参数 之 间 用 逗号 分 隔 开 ， 如 下 所 示 : 


function (paraml, param2) { ... } 


国 在 函数 体内 ， 把 参数 当 作 变 量 来 使 用 。 
国 用 实 参 调用 函数 。 在 运行 程序 时 ， 实 参 会 自动 赋值 给 形 参 ， 并 在 函数 体内 运行 ， 例 如 : 


myFunction(argl, arg2) 
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A 


逢 


本 章 内 容 包 括 : 


6 革 


图 从 地 数 返回 信息 


图 关键 字 return 
图 在 控制 台 


在 第 4 章 ， 我 
以 多 次 使 用 该 函数 。 
用 : 一 个 函数 可 以 村 
赋予 了 另 一 个 机 会 : 
过 直接 调用 函数 来 追 


7 


台 提 示 符 下 进行 


门 发 现 函 数 可 以 大 大 提高 了 
在 第 5 章 ， 我 们 学 会 了 向 函数 传递 信息 来 调用 函数 ， 使 函 


实验 


[ 作 效 率 ， 因 


返回 值 : 从 函数 获取 数据 


为 只 需 
YZ2NTD 


次 性 编写 函 


数 代码 ， 就 可 
数 更 加 灵活 好 


据 我 们 赋予 它 不 同 的 参数 而 产生 不 同 的 输出 结果 。 在 本 章 ， 我 们 为 函数 


将 其 运行 结果 返回 到 程序 中 。 而 
踪 该 函数 的 返回 值 。 


6.1 从 函数 返回 数据 


欲 将 函数 为 我 们 


5 章 代码 清单 5-6 中 ， 有 一 个 函数 showSum， 将 两 个 数字 之 和 显示 在 ] 
可 以 将 数字 相 加 并 返回 计算 结果 ， 导 
台 上 显示 计算 结果 ， 但 是 如 果 使 


add 函数 ， 


showSum 确实 可 以 在 控制 


所 用 ， 非 常 有 必要 得 到 函数 的 工作 结果 ， 并 可 以 随时 使 用 该 结果 。 在 第 


会 更 加 理想 。 


四 


量 ， 我 们 还 可 以 在 控制 台 提示 符 下 ， 通 


剖 台 上 。 如 果 有 一 个 


数 的 返回 值 ， 而 且 可 
其 保存 到 数据 库 中 。 


以 在 后 续 的 计算 中 使 用 该 返回 值 


6.1.1 用 返回 值 茶 代 二 数 调 用 
到 目前 为 止 ， 我 们 编写 的 大 多 数 函数 都 是 按 需 执行 代码 , 然后 将 一 些 内 容 输 出 显示 到 控制 


合 上。 函数 帮助 我 们 把 长 的 程序 分 解 成 可 理解 的 者 干 片段 ， 将 这 些 函数 赋 
程序 变 得 更 加 容易 理解 。 以 下 在 The Crypt 


showPlayerName ("KamnQra" ) ; 


ShowLine () 


showPlayerpPlace ("Kandra", 


showPlayerHealth ("Kandra", 


了 


50); 


ShowLine () ; 


这 些 函 数 体内 部 如 何 运行 ， 这 些 函数 名 也 很 容易 让 人 理解 以 上 代码 。 


即使 我 们 不 知道 


冰 数 还 可 以 返回 计算 结果 、 文 本 内 容 或 数据 库 晤 
也 可 以 将 该 返回 值 作为 其 他 函数 的 参数 使 用 。 以 下 示例 以 粗 体 显示 调用 了 四 个 函数 


局 


尽管 代码 清单 5-6 中 的 
] add 函数 ， 不 仅 可 以 选择 显示 函 


， 还 可 以 通过 网 络 发 送 该 返回 值 ， 或 将 


值 给 命名 好 的 变量 使 


"The Dungeon of Doom" ) ; 


显示 玩家 信息 的 代码 片段 就 是 这 样 一 个 示例 。 


的 数据 。 我 们 可 以 将 返回 值 赋值 给 变 


add、getPlayerPlace、findPlanetPosition 和 getMessage: 


var Sum = add(50, 23); 


第 6 章 ”返回 值 : 从 函数 获取 数据 


var placeInfo = getPlayerPlace ("Kandra", 
console.log(findPlanetPosition ("Jupiter")); 


console.log (getMessage () ) ; 


以 上 每 个 函数 返回 一 个 值 ， 返 回 值 谷 代 了 函数 调用 


上 述 四 个 语句 变 成 : 


var Sum = 73; 


"The Dungeon of Doom" ) ; 


j。 如 果 函 数 中 以 粗 体 表示 返回 值 ， 则 


var placeInfo = "Kandra is in The Dungeon of Doom"; 
console.log("Jupiter: planet number 5") ; 


console.log("I’m going on an adventure!"),; 


图 6-1 显示 了 当 调 用 函数 add 时 会 发 生 的 情况 。 
欲 从 函数 返回 值 ， 请 使 用 关键 字 return。 


var sum 


var sum 


高 


图 6-1 调用 函数 add 得 到 返 


6.1.2 ”关键 字 return 


使 用 关键 字 return 可 以 返回 函数 的 值 。 程 序 代码 ! 


数 调用 的 返回 值 。 


调用 函数 add 
Nadal(s 0 22) 
函数 返回 值 73 
= 
回 值 替 代 了 函数 调用 
回 值 73 
关键 字 return 之 后 的 内 容 就 是 替代 函 


代码 清单 6-1 定义 了 一 个 函数 getMessage， 该 图 数 包括 一 个 return 语句 ， 该 语句 以 关键 


字 retur 作为 开始 标志 : 


return "I'm going on an adventure!"; 


因为 在 关键 字 return 之 后 是 字符 串 ， 所 以 该 函数 的 返回 值 为 字符 串 “I'm going on an 


adventure! ”， 程 序 将 该 字符 串 赋 值 给 变量 response， 并 显示 到 控制 台 上 : 


> I'm going on an adventure! 


党 代码 清单 6-1 ”从 函数 获取 返回 值 


var getMessage; 


Ny http:/isbin.com/yucate/edit?js,console) 
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var response; 


getMessage = function (){ 


return "I'm going on an adventure!"; // 使 用 关键 字 return 从 函数 获取 返回 信息 


}; 
response = getMessage () ;// 调 用 函数 getMessage， 并 将 返 
console.log (response); 


地 


在 以 上 代码 中 ， 函 数 getMessage 总 是 返回 相同 的 值 。 在 编程 实践 中 ， 我 们 通常 


函数 时 将 参数 传递 给 函数 ， 以 此 得 到 函数 的 返回 值 。 
6.1.3 ”使 用 参数 来 确定 返回 值 


在 代码 清单 6-2 中 ， 将 返回 值 赋值 给 变量 fullIMessage， 并 将 其 记录 到 控 伟 


在 第 5 章 ， 我 们 学 习 了 如 何在 函数 定义 中 使 用 形 参 ， 然 后 在 函数 调用 中 使 用 实 参 将 信息 
传递 到 函数 中 。 这 样 ， 我 们 就 可 以 在 函数 体 中 使 用 该 信息 来 确定 函数 返回 的 值 ， 
同 的 参数 反复 调用 函数 ， 就 会 产生 不 同 的 返回 值 。 

下 面 的 代码 清单 显示 getHelloTo 函数 返回 一 个 包含 参数 name 的 字符 串 ， 程 序 将 返回 值 
赋 给 变量 并 将 其 记录 到 控制 台 上 : 


> Hello to Kandra 


代码 清单 6-2 ”使 用 参数 来 确定 返回 值 
(http://jsbin.com/nijijo/edit?js,console) 


var getHelloTo; 
var fullMessage; 


getHelloTo = function (name) { // 在 函数 定义 中 使 用 形 参 


return "Hello to " + name; 


j 


fullMessage = getHelloTo ("Kandra"); // 通 过 对 形 参 赋值 来 构建 返 世 


console.log(fullMessage); 


人 
口 了 


一 


上 上。 其实 使 
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下 赋值 给 变量 response 


是 在 调用 


[I 


因此 使 用 不 


> Hello to Kandra 
> Hello to Dax 


代码 清单 6-3 ”使 用 返回 值 作 实 参 
(http://jsbin.com/yapic/edit?js,console) 


var getHelloTo; 
getHelloTo = function (name) { 


return "Hello to " + name; 


上 


console.1og(getHelloTo ("Kandra") ) ; // 调 用 函数 getHelloTo 并 日 使 用 该 函数 的 返 


// 回 值 作为 console .1og 的 实 参 


console.log (getHelloTo ("Dax")); 


该 变量 是 多 余 的 ， 完 全 可 以 直接 记录 返回 值 ， 如 以 下 代码 清单 6-3 所 示 。 在 代码 清单 6-3 
中 ， 两 次 调用 函数 getHelloTo， 得 到 以 下 输出 : 


第 6 章 返回 值 : 从 函数 获取 数据 
函数 可 以 返回 任何 类 型 的 值 : 字符 串 、 数 字 、 对 象 甚至 其 他 函数 。 下 面 我 们 看 一 个 返回 
数字 的 例子 。 
图 6-2 所 示 为 调用 函数 add(50，23)。 该 图 显示 如 何 将 实 参 传递 给 函数 add， 再 以 此 计算 
返回 值 。 
var sum = add( €0 , © ); 
function (Inumber1), number2 
Var total = (numbery) + (number2 ， 
返回 值 赫 代 
了 函数 调 = 50 加 23 ; 
三 7 
return Ge; 
var Sum = 73 ，; 
图 6-2 ”函数 add 计算 返回 值 
一 个 代码 清单 展示 了 函数 add 的 运行 情况 ， 请 特别 注意 其 中 的 关键 字 return。 
窟 ”代码 清单 4 返回 两 数 相 加 之 和 
(http://jsbin.com/haqapu/edit?js,console) 
Var add; 
add = function (numberl, number2) { 


var total = 


return total; 


} 


var Sum = adqdq(5 


console.log (sum); 


在 以 上 代码 中 ，add(50，23) 调 用 了 函数 add， 将 50 赋值 给 
相 加 ， 两 者 相 加 之 和 赋值 


number2，numberl 的 值 与 


后 一 行 的 关键 字 return， 用 total 值 蔡 代 了 函数 调用 ， 


add (50, 


Var SUm = 
就 变 成 : 


Var sum = 


因为 add(50, 23) 的 返回 


请 注意 ， 赋 值 运算 符 “ 一 
则 将 该 函数 的 返回 值 赋值 
在 以 上 代码 清单 6-4 中 ， 函 数 add 上 


的 右 侧 ， 


Ts 


值 为 73。 
二 ”将 二 


0, 23); 


number2 的 值 


23)3 


numberl + number2; 


给 变量 total 


// 将 计算 结果 赋值 
// 使 用 关键 字 return 将 计算 结果 返回 到 调用 函数 的 地 方 
// 调 用 函数 adada， 并 将 函数 的 返回 值 赋值 给 变量 sum 


经 


numberl1， 将 23 网 


式 值 给 


给 变量 total。 函 数 体内 最 


/7 


给 其 左 侧 


六 


的 变量 


因此 ， 以 下 


其 右 侧 的 值 赋值 给 其 左 侧 的 变量 。 
则 的 变量 。 


如 果 函 数 调用 在 “一 ” 


total 并 不 是 必需 的 ， 因 为 它 被 赋值 给 一 个 
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变量 并 立即 返回 。 正 如 代码 清单 6-5 所 示 ， 函 数 totalCost 可 以 将 计算 结果 直接 返回 。 基 于 水 
管 工 的 上 门 服务 费 和 水 管 工 的 每 小 时 收费 率 ，totalCost 可 以 算出 其 工作 若干 小 时 后 的 总 费 
用 。 例 如 ， 水 管 工 的 上 门 服务 费 是 $30， 工 作 每 小 时 收费 $840， 那 么 他 工作 三 小 时 的 总 费用 是 
多 少 ? totalCost(30，40，3) 应 该 返回 结果 $150。 


全 代码 清单 -5 合 三 个 参数 的 函数 
0g (http://jsbin.com/jedigi/edit?js,console) 


var totalCost,; 
totalCost = function (callOoutCharge, costPerHour, numberOfHours) { // 计 
算 总 费用 并 返回 值 


return callOutCharge + costPerHour * numberOfHours; 


}; 
console.1log ("Ss" + totalCost (30，40，3)); // 函 数 返回 值 奉 代 了 调用 函数 totalCost 
在 以 上 代码 中 ， 当 调用 函数 totalCost 时 ， 先 对 关键 字 retum 右边 进行 计算 ， 然 后 返回 值 
该 计算 遵循 通常 的 算术 规则 ， 首 先 执 行 乘法 ， 然 后 执行 加 法 : 30+40x3=30+120= 150。 


6.2 ”在 控制 台 提示 符 下 进行 实验 


程序 员 通 常 不 会 在 程序 成 型 阶段 使 用 控制 台 。 也 就 是 说 ， 在 程序 发 布 后 和 在 线 使 用 
程序 员 通 常 不 再 使 用 控制 台 。 他 们 通常 在 开发 阶段 ， 即 程序 设计 和 编写 时 使 用 控制 台 。 控 制 
台 为 程序 员 提 供 了 一 种 方便 的 方法 来 记录 程序 在 运行 中 的 值 和 出 现 的 错误 ， 并 可 以 跟踪 调查 
程序 在 运行 时 J 。 这 种 交互 性 ， 即 获得 即时 反馈 的 机 会 ， 使 控制 台 对 于 编程 学 习 非 
常 有 帮助 一 一 尤其 是 通 过 实验 来 学 习 编 程 。 下 面 我 们 就 去 JS Bin 控制 全 探险 和 发 现 上 述 函数 
功能 。 


6.2.1 调用 函数 
以 下 代码 清单 6-6 包括 前 几 个 代码 清单 的 四 个 函数 ， 在 运行 程序 时 ， 不 会 在 控 玮 
生 任何 输出 ， 不 包括 对 console.log 的 任何 调用 。 


3 代码 清单 6-6 几 个 有 返回 值 的 函数 
中 (http://jsbin.com/lijufo/edit?js,console) 


a 


A 


WE 


var getMessage; 
var getHelloTo; 
var add; 
var totalCost; 
getMessage = function () { 
return "I'm going on an adventure!",; 
}; 
getHelloTo = function (name) { 
return "Hello to " + name; 


5 
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add = function (numberl, number2) { 
return numberl + number2,; 


totalCost = function (callOutCharge, costPerHour, numberOfHours) { 
return callOutCharge + costPerHour * numberOfHours; 


}; 
运行 以 上 程序 ， 将 四 个 函数 分 别 赋值 给 在 程序 顶部 声明 过 的 四 个 变量 ， 然 后 ， 我 们 就 可 
以 在 控制 台 提示 符 下 访问 这 些 变量 ， 可 以 调用 那些 已 经 赋值 给 变量 的 函数 ， 可 以 在 控制 台 上 
看 到 这 些 函 数 的 返回 值 。 
单 击 JS Bin 上 的 链接 ， 并 运行 该 程序 。 在 控制 台 提 示 符 后 面 输入 : 


一 局 


> getMessage() 


然后 输入 〈Enter〉 键 ,函数 getMessage 得 以 运行 ， 并 在 控 什 


下 
上 
Sl 
dl 
并 
[a 
一 
EH 


"I'm going on an adventure!'" 


在 控制 台 提 示 符 后 面 按键 盘 上 的 向 上 稍 头 ， 就 会 打开 刚刚 输入 的 最 后 一 行内 容 。 可 以 使 
用 控制 台 上 的 向 上 和 向 下 箭头 来 找到 先前 输入 的 条 目 ， 按 (Enter〉 键 可 以 重新 提交 该 命令 。 
以 上 代码 中 ， 函 数 getMessage 总 是 返回 相同 的 字符 串 。 如 果 查 看 该 函数 的 函数 体 ， 就 可 以 看 
到 它 返 回 的 确实 是 字符 串 形式 的 文字 ， 是 一 个 硬 编码 值 ， 如 下 所 示 : 


return "I'm going on an adventure!",; 
以 上 程序 中 的 另外 一 个 函数 getHelloTo 在 其 定义 中 包含 了 一 个 形 参 name。 形 参 name 的 意 
义 在 于 允许 该 函数 的 返回 值 产生 变化 。 当 每 次 调用 该 函数 时 传递 给 该 函数 的 实 参 改变 了 ， 那 
么 该 函数 的 返回 值 会 有 相应 的 改变 ， 如 下 所 示 : 


getHelloTo = function (name) { 


return "Hello to " + name; 


}3 
可 以 在 控制 台 上 尝试 每 次 用 不 同 的 参数 来 调用 该 函数 , 如 下 所 示 : 


> getHelloTo ("Jason") 
"Hello to Jason" 

> getHelloTo ("Rosemary") 
"Hello to Rosemary" 


可 以 看 到 ， 参 数 的 改变 会 引起 函数 返回 值 的 改变 。 


6.2.2 ”声明 新 的 变量 


控制 台 不 仅 允 许 用 户 访问 已 声明 的 变量 
紧 接 着 上 一 节 内 容 ， 在 控制 台 上 输入 : 


而 且 允 许 用 户 声 明 新 的 变量 并 为 其 赋值 。 


RE 


> Var friend 
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并 按 (Enter〉 键 ， 控 种 


I 台 上 依旧 是 前 一 个 条 目的 值 ， 因 为 我 们 尚未 对 变量 friend 赋值 ， 控 制 


台 上 会 显示 : undefined (未 定义 )。 


给 变量 friend 赋值 ， 输 入 : 


> friend ="Amber" 


并 按 〈Enter〉 键 。 探 带 


"Amber" 


台 上 会 


程序 会 使 用 新 的 变量 friend 作为 函数 getHelloTo 的 参数 并 在 控制 台 


显示 新 值 : 


ja 


> getHelloTo (friend) 


"Hello to Amber" 


再 来 试 一 斌 函数 add 和 totalCost。 向 它们 传递 不 同 的 参数 ， 并 查看 在 控制 台 


回 值 ， 如 下 所 示 : 


> add (30, 12) 


42 


> totalCost (10, 20, 3) 
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控制 台 不 仅 可 以 记录 来 自 程序 的 消息 ， 


中 的 所 有 代码 清单 。 


下 面 我 们 使 用 刚刚 掌握 的 返 


方式 。 


U 

~ 
sl 
I 
怀 
[Bs 


用 户 还 可 以 通过 控制 台 深 入 挖掘 程序 ， 并 使 用 控 


为 建 玩家 信息 字符 串 


制 台 来 查看 程序 的 运行 是 否 如 预期 所 料 。 不 需要 任何 批准 或 许可 ， 读 者 就 可 以 直接 测试 本 书 


回 值 知识 来 进一步 改进 游戏 The Crypt 中 显示 玩家 信息 的 


图 6-3 显示 了 本 节 的 重点 内 容 ; 通过 使 用 返回 值 显示 玩家 的 信息 。 


Players 


player variables 


a player object 


showing player info 


player items 


Player Constructor 
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Places 


place objects 


using functions 
place items 


using arguments 
place exits 


Using return values 
showing place info 


using objects 
Place Constructor 


图 6-3 ”The Crypt 中 的 游戏 元 素 


Maps 
linking places 
Game 
render 
get 
go 
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在 第 5 章 ， 我 们 将 显示 玩家 信息 的 任务 分 配给 若干 个 函数 ， 每 个 函数 都 有 一 个 特定 的 任 
务 ， 如 下 所 示 : 


showPlayerName ("Kandra") ; 
showPlayerPlace ("Kandra'", "The Dungeon of Doom'" ) ; 
showPlayerHealth ("Kandra", 50)，; 


以 上 每 个 函数 都 将 一 申 信息 记录 到 控制 台 上 ， 但 是 如 果 我 们 并 不 想 在 控制 台 上 显示 
以 上 信息 ， 该 如 何 是 好 ? 例如 ， 我 们 希望 在 电子 邮件 中 发 送 以 上 信息 ， 我 们 希望 将 其 作 
为 对 Web 请 求 的 响应 ， 或 者 我 们 希望 将 其 附加 到 网 页 上 的 某 个 现 有 元 素 上 。 如 果 一 个 函 
数 不 仅 构建 了 信息 字符 串 ， 并 且 可 以 供 程序 根据 需要 使 用 其 返回 值 ， 那 么 该 函数 就 会 变 
得 更 加 灵活 好 用 。 


6.3.1 为 玩家 的 姓名 、 健 康 值 和 位 置 构 建 字符 串 


将 函数 所 需要 的 信息 作为 参数 传递 给 这 些 函 数 ， 这 些 函数 就 会 返回 一 个 包含 该 信息 的 字 
符 串 ， 如 下 所 示 : 


getPplayerName ("Kandra"); //--> "Kandra" 
getplayerHealth('"Kandra", 50);，; //--> "Kadra has health 50" 
getPplayerPlace ("Kandra", "The Dungeon"); //-->"Kandra is in The Dungeon" 


首先 分 析 getPlayerName 函 数 。 目 前 该 函数 只 是 返回 一 个 传递 给 它 的 姓名 ， 貌 似 这 是 浪费 
时 间 。 但 是 ， 定 义 这 样 一 个 函数 ， 能 够 让 我 们 以 同样 的 方式 访问 所 有 的 玩家 信息 ， 并 且 获 取 
玩家 的 姓名 信息 与 获取 玩家 的 健康 值 和 位 置信 息 三 者 大 同 小 异 。 定 义 这 样 一 个 函数 使 得 以 后 
的 代码 更 新 变 得 更 容易 ， 例 如 更 改姓 名 的 显示 方式 。 以 下 代码 清单 显示 了 getPlayerName 的 函 
数 定 义 和 一 次 示范 性 调用 该 函数 ， 输 出 结果 如 下 所 示 : 


> Kandra 


代码 清单 6-7 为 玩家 的 姓名 构建 字符 串 
(http://jsbin.com/hijeli/edit?js,console) 


var getplayerName; 

getpPlayerName = function (playerName) { 
return playerName; 

} 

console.log(getPlayerName ("Kandra")); 

我 们 已 经 学 会 使 用 getPlayerName 为 玩家 的 姓名 构建 字符 串 ， 再 来 学 习 下 面 两 个 函数 
getPlayerHealth 和 getPlayerPlace 就 变 得 非常 容易 ， 因 为 这 三 个 函数 非常 相似 ， 都 是 根据 传递 
来 的 信息 构建 一 个 简单 的 字符 串 。 下 一 个 代码 清单 包括 对 getPlayerHealth 和 getPlayerPlace 
两 个 函数 的 定义 以 及 一 些 使 用 示例 ， 会 在 控制 台 上 输出 以 下 信息 : 


> Kandra has health 50 


> Kandra is in The Dungeon of Doom 
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代码 清单 6-8 为 玩家 的 健康 值 和 位 置 构建 字符 串 


(http://jsbin.com/pemore/edit?js,console) 


var getplayerHealth; 

var getplayerplace; 

getplayerHealth = function (playerName, playerHealth) { 
return playerName + " has health " + playerHealth; 

2 

getPlayerPlace = function (playerName, playerPlace) { 
return playerName + " is in " + playerplace; 

和 

conSsole.1lodg (getP1layetrHealth ("Kanadra"，50) ) ; 

console.1odg(getP1layerPlace ("Kandra", "The Dungeon of Doom'" ) ) ， 


如 何 使 用 一 个 主 函数 getPlayerInfo 来 调用 以 上 三 个 函数 ， 向 我 们 显示 所 需要 的 字符 串 ? 
下 一 节 内 容 将 展示 如 何 将 这 几 个 函数 合并 为 一 个 主 函 数 。 
6.3.2 ”用 一 个 函数 显示 玩家 的 信息 一 一 把 儿 个 函数 集合 在 一 起 


现在 要 把 几 个 函数 集合 在 一 起 来 构建 一 个 主 函数 ， 生 成 一 个 关于 玩家 的 信息 字符 串 ， 输 
出 如 下 所 示 : 


> Kandra 

> 火炎 大大 大 大火 大大 大 大 火炎 大 大 大 大 炎炎 大 

> Kandra is in The Dungeon of Doom 
> Kandra has health 50 


>> 大火 火 火炎 类 火炎 火炎 火炎 大火 炎炎 类 火炎 类 


为 了 构造 一 行 字符 来 分 隔 玩家 的 各 种 信息 ， 可 以 使 用 函数 getBorder， 该 函数 的 返回 值 
是 一 行星 号 ， 如 上 所 示 。 下 面 的 代码 清单 显示 了 函数 getPlayerInfo 的 定义 ， 其 中 包括 对 某 些 
其 他 函数 的 调用 ， 这 些 函数 在 JS Bin 中 是 可 以 看 到 的 。 


全 过 ”代码 清单 6-9 创建 一 个 显示 玩家 信息 的 字符 串 
WE (http://jsbin.com/javuxe/edit?js,console) 


var getplayerIinfo; 

getplayerIinfo = function (playerName, playerPlace, playerHealth) { 
Var playerIinfo; 

playerInfo = "\n" + getPlayerName (playerName); // 通 过 使 用 其 他 函数 来 构 

// 建 字符 串 的 一 部 分 内 容 

playerInfo += "\n" + getBorder () ;// 通 过 使 用 += 来 奶 加 一 个 字符 串 到 现 有 字符 串 

PlayerInfo += "\n" + getplayerPlacel 


playerName, playerpPlace),; 


playerIinfo += "\n" + getPlayerHealth( 
playerName, playerHealth),; 
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playerIinfo += "\n" + getBorder(); 
playerIinfo += "\n'"; 


Ud 


return playerInfo;  ”/// 返 回 完整 的 字符 上 


} 


console.log(getPlayerIinfo('"Kandra", "The Dungeon of Doom", 50)); 
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在 以 上 代码 中 ， 通 过 把 调用 函数 返回 的 字符 串 一 步 步 地 追加 给 变量 playerInfo， 函 数 
getPlayerInfo 逐步 构建 完整 的 玩家 信息 字符 串 。 在 每 个 步骤 中 ， 附 加 的 额外 字符 串 m 是 一 个 
换行 字符 ， 换 行 符 后 面 的 文本 将 出 现在 控制 台 的 一 个 新 行 上 。 使 用 += 运 算 符 可 以 将 一 个 字符 


串 追 加 到 现 有 字符 串 的 末尾 。 


本 章 的 最 后 一 个 例子 是 将 所 有 代码 集合 到 代码 清单 6-10 中 ， 并 且 用 两 个 玩家 对 象 来 测 
试 函 数 getPlayermfo。 在 该 代码 清单 中 ， 函 数 getBorder 使 用 了 不 同 的 分 隔 符 来 分 隔 信息 ， 输 


出 两 个 玩家 的 信息 如 下 所 示 : 


> Kandra is in The Dungeon of Doom 
> Kandra has health 50 


> Dax is in The Old Library 
> Dax has health 40 


全 晤 ”代码 清单 6-10 使 用 对 象 来 显示 玩家 的 信息 
MW (http://jsbin.com/puteki/edit?js,console) 


var getPlayerName = function (playerName) { // 定 义 函 数 来 返回 玩家 
/ /的 字符 囊 


return playerName; 
}; 
var getplayerHealth = function ( 
playerName, playerHealth) { 
return playerName + " has health " + playerHealth; 
} 
var getplayerpPlace = function (人 
playerName, playerPlace) { 
return playerName + " is in " + playerPlace; 
二 
var getBorder = function () { // 定 义 函数 来 返回 一 行 字符 串 作为 分 隔 符 


return "==== 三 三 三 三 三 三 = 三 三 三 三 三 三 三 三 三 三 由 > 


闵 体 信息 
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}; 


var getPlayerIinfo = function ( 

playerName，playerPlace，playerHealth) {  // 定 义 函 数 来 调用 先前 的 几 个 函 
// 数 ， 构 建 玩家 信息 字符 串 

var playerIinfo; 
playerIinfo = "\n" + getPplayerName (playerName); 
playerIinfo += "\n" + getBorder(); 
playerIinfo += "\n" + getplayerPlace (playerName, playerPlace); 
playerIinfo += "\n" + getPlayerHealth (playerName, playerHealth),; 
playerIinfo += "\n" + getBorder(); 
playerIinfo += "\n"; 
return playerIinfo; 

}; 

var playerl1 = { / /创建 两 个 玩家 对 象 


name: "Kandra 
place: 
health: 50 


}; 


var player2 = { 


name: "Dax", 
place: 
health: 40 


}y 
ConSsole .1od ( 
getplayerIinfo 


playerl .name, 


console.1log( 
getplayerIinfo 


Li 
了 


"The Dungeon of Doom", 


"The Old Library", 


// 
( 


( 


playerl.place, 


两 个 玩家 测试 该 函数 ， 将 返回 的 字符 串 显示 在 控制 台 上 


playerl .health) ); 


player2.name, player2.place, player2.health)); 


关 台 上 显示 输出 的 函数 ， 而 且 可 以 进一步 得 到 玩家 信息 字符 串 的 


现在 ， 我 们 不 仅 能 在 控 


返回 值 ， 随 后 还 可 以 选择 用 这 些 字符 
将 玩家 的 各 种 信息 分 别传 递 给 函数 也 是 一 件 麻 烦 事 。 因 为 不 同 的 函数 需要 不 同 的 信息 


串 来 做 些 事情 。 


所 以 我 们 必须 确保 按 正 有 


6.4 本 章 小 结 


的 顺序 放置 参数 。 如 果 能 够 将 整个 玩家 对 象 作 为 参数 传递 给 函数 
再 让 函数 访问 它 所 需要 的 属性 ， 那 么 这 件 麻烦 事 将 会 变 得 轻松 许多 。 在 第 7 章 ， 
看 到 ， 把 JavaScript 对 象 既 用 作 参 数 又 用 作 返 回 值 会 带 给 我 们 许多 便利 ! 


， 我 们 将 会 


国 使 用 关键 字 return 返回 函数 的 信息 : 


return "Pentaqua 
return 42; 


return true; 
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图 将 函数 调用 得 到 的 值 赋 值 给 变量 或 用 作 参 数 ， 用 函数 的 返回 值 奉 代 函 数 调用 : 


var particle = getDiscovery(); 


console.log(getPlayerplace ("Kandra")); 


国 定义 包含 形 参 的 函数 ， 使 用 实 参 向 函数 传递 信息 ， 并 以 此 确定 函数 的 返回 值 : 


var sum = adqd (28, 14) ，; 
国 使 用 控制 台 来 浏览 和 测试 程序 。 
国 在 控制 台 提 示 符 下 调用 函数 ， 并 碍 看 函数 的 返回 值 。 
图 在 控制 台 上 声明 新 的 变量 ， 并 为 其 赋值 ， 然 后 用 作 参 数 传递 给 函数 。 
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逢 


-2 


7 前 


本 章 内 容 包 括 : 


对 图 参数 : 将 对 过 传递 给 困 数 


图 使 用 对 象 作为 参数 

图 在 函数 内 部 访问 对 象 的 属性 
图 在 涵 数 内 部 添加 新 的 对 象 属性 
图 从 函数 返回 对 象 

图 将 子 数 设置 为 对 象 的 属性 


本 书 第 


中 ， 我 们 已 经 学 会 


字 retum 向 函数 传递 和 返回 信息 。 
称 为 对 象 的 各 个 属性 。 


4 一 7 章 一 直 在 讲 
何 根据 需要 使 用 函数 执行 代码 ， 并 且 学 
我 们 还 学 习 了 如 何 使 用 对 象 将 各 个 值 集 合 到 一 起 ， 这 些 值 
双 函 数 和 对 象 结合 到 一 起 ， 二 者 的 结合 会 像 涡轮 增 压 一 样 


下 面 我 们 将 和 


大 大 提高 程序 的 效率 和 可 读 性 。 
大 家 还 记得 第 3 章 中 提 到 的 急 
这 样 的 打包 或 分 块 处 理 方式 ， 


述 函 数 的 相关 内 容 ， 本 章 是 这 四 章 
会 了 如 何 使 用 形 参 


的 最 后 一 章 。 在 前 面 几 章 


、 实 参 和 关键 


救 包 吗 ? 我 们 把 急救 包 看 作 一 个 整体 对 象 来 传递 和 收纳 。 
也 就 是 将 个 体 集合 视 为 单一 整体 的 处 理 方式 ， 是 人 类 在 语言 和 


记忆 中 处 理 复杂 信息 时 采用 的 一 种 重要 方法 。 当 我 们 真正 需要 内 部 物品 时 ， 才 会 考虑 急救 包 


内 的 各 个 元 素 : 防腐 剂 
我 们 将 使 用 与 急救 包 相 同 的 打包 方式 ， 


在 本 草 中 ， 
并 返回 信息 。 


、 襄 药 、 绷 带 等 


7.1 使 用 对 象 作为 参数 


在 编程 时 ， 如 果 能 


只 需 定义 一 


个 含 参 函数 ， 


把 对 象 作 为 一 


够 将 对 象 作为 一 个 整体 传递 给 函数 ， 将 会 非常 有 用 ， 
许多 属性 ， 而 函数 又 需要 访问 这 些 属性 时 ， 使 用 对 象 作 为 函数 的 参数 就 显 
在 调用 函数 时 就 不 再 需要 从 前 那个 很 长 的 实 


个 整体 参数 向 函数 传递 


尤其 是 该 对 象 具有 
得 尤为 方便 了 。 我 们 


参 列表 了 。 


与 show 


PlayerInfo (playerl.name, playerl.location，playerl.health〉 相 比 ，showPlayerInfo (playerl ) 显 


然 更 加 简单 整洁 9 


欲 将 相同 的 信息 


更 加 容易 理解 ， 也 更 加 不 易 出 错 。 
传递 给 某 一 函数 ， 我 们 完全 不 必 将 各 信息 
采用 将 各 信息 打包 为 单一 对 象 的 方式 进行 传递 (图 


7-1)。 


作为 单独 的 值 进行 传递 , 而 是 


AA 


一 个 对 象 作为 一 个 参数 


ShowP1LayezInto( player1 ) ; 


ShowP1ayezrInfo( playerl.name 


图 7-1 


7.1.1 访问 对 象 参数 的 属性 


程序 来 显示 有 关 太 阳 系 的 信息 。 

以 下 代码 清单 7-1 显示 了 
作为 参数 调用 该 函数 时 ， 函 数 体 返 
求 出 来 的 ， 输 出 以 下 内 容 : 


>Jupiter: 


var planet1; 

Var getplanetIinfo,; 
"Jupiter", 
5 


planet1 
name: 
position: 
type: 
radius: 69911, 


sizeRank: 1 


} 


getPplanetInfo 


return planet .name+ ": 


}; 


console.log(getPlanetIinfo(planet1)); 


与 多 个 参数 相 比 ， 


出 于 对 太空 冒险 、Rosetta 和 Philae 航天 器 充满 向 往 和 好 奇 心 ， 


function (planet){ // 包 含 一 个 形 参 
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,， playerl.location , playerl.health ); 
多 个 参数 使 工作 变 得 更 加 复杂 
一 个 对 和 象 作为 一 个 参数 显然 更 加 简洁 
我 们 决定 编写 一 个 应 用 


这 款 应 用 程序 的 功能 之 一 就 是 显示 关于 各 行星 的 信息 。 


planet 的 函数 getPlanetInfo。 当 使 用 对 象 planet 


一 个 字符 串 ， 该 字符 串 是 基于 对 象 planet 的 某 些 属性 构 


planet number 5 


代码 清单 7-1 将 对 象 作为 参数 传递 给 函 
(http://jsbin.com/tafopo/edit?js,console) 


数 


"Gas Giant", 


: planet， 以 供 
//planet 传 入 函数 

planet number " + planet .position;// 访 问 对 象 

//planet 的 属 


讽 


实 参 对 象 


性 


// 调 用 函数 getPlanetInfo， 将 一 个 
/ /行星 作 为 实 参 传 入 


在 以 上 代码 中 ， 将 对 象 作 为 单个 参数 传递 给 函数 使 程序 变 得 干净 整洁 。 我 们 再 也 没有 必 
要 耗费 精力 去 确保 按照 正确 的 顺序 添加 所 有 必需 的 参数 ， 因 为 一 个 对 象 参数 就 解决 了 问题 。 
将 对 象 传递 给 函数 后 ，JavaScript 会 自动 将 其 分 配给 函数 定义 中 所 包含 的 参数 。 


我 们 可 以 通过 参数 访问 对 象 的 属性 ， 如 图 7-2 所 示 。 
所 属性 。 


象 ， 甚 至 可 以 为 该 对 象 添 加 划 


该 函数 通过 参数 完全 探 于 


上 了 这 个 对 
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getPlanetInfo = function (个 BUSEDEE ) { 


return (Blanee nme + ": planet number " + 人 IEDEERSEGSUEISDR 


在 函数 体内 可 以 访问 对 象 的 属性 


图 7-2 在 函数 体内 可 以 访问 对 象 的 属性 


7.1.2 ”给 对 象 参数 添加 属性 
当 我 们 将 对 象 作为 参数 传递 给 函数 时 ， 函 数 体 中 的 代码 有 权 访 问 对 象 的 属性 ， 可 以 读 
取 、 更 改 和 删除 对 象 的 属性 ， 并 可 以 给 对 象 添 加 新 的 属性 。 
代码 清单 7-2 显示 了 两 个 带 有 参数 planet 的 函数 。 当 我 们 将 一 个 行星 对 象 〈 包 含 行星 名 


称 和 半径 ) 传递 到 函数 calculateSizes 时 ， 该 函数 向 该 行星 对 象 添 加 了 两 个 新 的 属性 : area 和 
volume 《面积 和 体积 )， 如 图 7-3 所 示 。 


单个 参数 
calculateSizes = function (@¥lanea) { 
Var r = planet .radius; 
USTEERSEES = 4 * 3.142 * rr*r; 
函数 给 对 人 象 planet 添 
Blaneenvorume = 4*+3.142*+r*rr*r)/3; 加 了 两 个 新 的 属性 


图 7-3 ”函数 calculateSizes 给 对 象 planet 添加 了 新 属性 


函数 displaySizes 使 用 两 个 新 属性 将 该 行星 的 有 关 信息 显示 在 控制 对 上: 


>Jupiter 
>surface area = 61426702271.128 square km 
>volume = 1431467394158943.2 cubic km 

二 。 代码 清单 7-2 给 对 象 添加 属性 的 函数 

My http:/ijsbin.com/qevodu/edit?js,console) 


var planet1 = { name: "Jupiter", radius: 69911 }; 


var calculateSizes = function (planet){ // 在 函数 calculateSizes 定义 时 ， 只 


// 有 一 个 参数 planet 


Var r = Planet .radius; 


planet.area= 4 * 3.142 * rr * I; // 在 函数 调 


时 ， 给 对 象 planet 增加 
// 了 一 个 面积 属性 area 
planet.volume= 4 * 3.142 *r*r* Ir /3; // 增 加 了 一 个 体积 属性 volume 
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和 
var displaySizes = function (planet){ // 在 函数 aisplaySizes 定义 时 ， 只 有 
// 一 个 参数 planet 


console.1log (planet .name) ; 


console.log("surface area = " + planet.area + " squarekm"); 
console.log("volume = " + planet.volume + " cubickm"); 

}; 

calculateSizes (planet1); // 将 对 象 planet1 作为 参数 传递 给 两 个 函数 


displaySizes (planet1); 


在 以 上 代码 中 ， 创 建 了 对 象 planet， 并 将 其 赋值 给 变量 planetl: 


Planetl = { name: "Jupiter", radius: 69911 }; 


当 调 用 函 数 calculateSizes 时 ， 将 planetl 作为 实 参 传递 给 该 函数 : 


calculateSizes (planet1); 
JavaScript 将 planetl 赋值 给 形 参 planet 以 供 该 函数 使 用 。 该 函数 使 用 参数 planet 为 对 象 
添加 两 个 新 属性 planet. area 和 planet. volume。 通 过 调用 displaySizes 函数 ， 将 该 对 象 的 两 个 
新 属性 的 信息 显示 出 来 : 


displaySizes (planet1); 


不 但 可 以 将 对 象 传递 给 函数 ， 而 且 可 以 从 函数 返回 对 象 。 


7.2 ”从 函数 返回 对 象 


在 第 6 章 ， 我 们 学 习 了 如 何 把 对 象 作为 参数 传递 给 函数 ， 这 是 一 种 将 信息 移动 到 所 需 位 
置 的 好 方法 。 同 理 ， 使 用 对 象 作为 函数 的 返回 值 也 同样 高 效 可 行 。 胃 数 可 以 对 传递 给 它们 的 
对 象 进行 处 理 ， 然 后 将 对 象 返 回 ， 或 者 函数 也 可 以 返回 一 个 在 函数 体内 创建 的 新 对 象 。 

丁 探讨 了 两 个 例子 : 在 第 一 个 例子 中 ， 使 用 很 多 参数 来 构建 一 个 新 的 行星 对 象 ， 在 第 
二 个 例子 中 ， 使 用 两 个 对 象 参数 来 创建 二 维 空间 中 的 一 个 点 。 


一 


重 返 前 文中 提 过 的 太阳 系 应 用 程序 ， 现 在 我 们 决定 简化 对 行星 的 创建 程序 。 我 们 打算 编 
写 一 个 函数 来 传递 关键 信息 ， 并 返回 一 个 有 相应 属性 的 行星 对 象 planet。 我 们 使 用 函数 
buildPlanet 创建 行星 对 象 ， 如 下 所 示 : 


planet1 = buildplanet ("Jupiter", 5, "Gas Giant'"，69911，1) :; 


图 7-4 显示 JavaScript 在 调用 函数 buildPlanet 时 如 何 将 实 参 赋值 给 形 参 。 我 们 就 这 样 使 
用 参数 来 创建 一 个 新 对 象 。 
代码 清单 7-3 定义 了 函数 buildPlanet， 另 外 还 有 一 个 函数 getPlanetInfo 用 于 获取 显示 行 
星 的 信息 ， 显 示 信 息 如 下 所 示 ; 
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JUPITER: planet 5 
NEPTUNE: planet 8 


请 注意 星球 名 称 采 用 大 写字 母 。 函 数 getPlanetInfo 使 用 JavaScript 的 内 置 函 数 


toUpperCase， 将 字符 串 转 换 为 大 写字 母 。 上 述 toUpperCase 和 其 他 一 些 JavaScript 的 内 置 函 
数 将 在 7.3 节 中 讨论 。 


planet1 = buildPlanet (人 UpSEET，5 ,， "Gas Giant ,59911 |, 07); 
function ( @usme®, position ,Eyeeg ,zaoaius eam) 
return { 


name :name aa ， 


position: posiltion, 
type: EME , 
函数 返回 值 代 radius: radius ， 
末了 函数 调用 sizeRank: rank 
}; 
return { 


name: USIEEED 

position: -8 

type: "Gas Giant", 

radius: 559 ， 
sizeRank: 引 


planet1 = { 
name: "Jupiter", 
position: 5, 
type: "Gas Giant", 
radius: 69911, 
sizeRank: 1 


}; 
图 7-4 函数 buildPlanet 使 用 形 参 来 创建 一 个 对 象 ， 当 调用 函数 时 JavaScript 将 实 参 赋值 给 


代码 清单 7-3 ”用 函数 来 创建 行星 
(http://jsbin.com/coyeta/edit?js,console) 


™ 


Var buildPlanet,; 
Var getplanetIinfo,; 
Var planet!1,; 
Var planet2; 
buildPlanet = function (name, position, type, radius, rank) { 
return { // 使 用 花 括号 和 从 函数 立即 返回 值 来 创建 一 个 对 象 
name: name，// 创 建 一 个 属性 name， 并 将 参数 name 的 值 赋 给 属性 name 
position: position, 
type: type, 
radius: radius, 


| 
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sizeRank: rank 


}; 
局 
getPlanetInfo = 


return planet.name 


二 


篇 省 立 


第 7 蛙 


function (planet) { 


.toUpperCase() + ": planet "+ 


对 象 参 数 : 将 对 象 传递 


给 双 允 数 


带 给 


planet .position; 


planetl1 = buildpPlanet ("Jupiter", 5, "Gas Giant", 69911, 1); 
planet2 = buildPlanet ("Neptune", 8, "Ice Giant", 24622, 4); 
console.log(getPlanetInfo(planet1)); 
console.log(getPlanetIinfo (planet2)); 
由 函数 buildPlanet 创建 的 对 象 中 的 键 - 值 对 ， 看 起 来 有 些 奇怪 : 
name: name，position: position， 等 等 。 
对 于 每 个 键 - 值 对 ， 键 位 于 冒号 的 左 侧 ， 值 位 于 冒号 的 右 侧 。 我 们 使 用 形 参 作为 值 ， 因 
此 对 于 以 下 函数 调用 : 
planet1 = buildplanet (“Uupiter”，5，“Gas Giant”，69911，1) ; 
这 个 对 象 创建 代码 就 变 为 ; 
name: "Jupiter", 
position: 5, 
type: "Gas Giant", 
radius: 69911, 
sizeRank: 1 
7.2.2 二 维 空间 的 点 
为 了 把 这 些 行星 以 形象 的 方式 展现 在 太阳 系 中 ， 我 们 需要 使 用 二 维 坐标 。 每 一 个 点 的 坐 
标 都 有 x 和 y 两 个 值 ， 这 看 上 去 就 像 每 一 个 位 置 点 是 一 个 对 象 ， 而 该 对 象 拥 有 x 和 y 两 个 属 
性 ， 如 下 所 示 : 
point1 = {x:3,Yy:4}; 
point2 = {XX:0,Y: -2 1}; 
我 们 可 以 用 圆 点 运算 符 来 访问 每 一 个 值 ， 如 point1.x, point2.y 等 。 
作为 首次 实验 ， 我 们 可 以 编写 一 个 程序 来 移动 一 个 位 置 点 ， 使 该 点 在 x 方向 和 y 方向 上 


各 移动 一 定 的 距离 。 因 为 位 
例如 ， 可 以 使 用 对 象 { x : 


4,y : 


以 下 代码 清单 7-4 中 的 函数 move 包含 两 个 参数 ， 
如 果 从 第 一 个 位 置 点 出 发 ， 移 动 指定 的 数值 
该 程序 使 用 了 一 个 函数 showPoint， 输 出 


-2 } 来 表示 向 右 移 动 4， 


置 的 变化 包括 x 和 y 两 个 要 素 ， 因 此 同样 可 以 使 用 对 象 来 表示 。 
问 下 移动 2。 
一 个 初始 位 置 对 象 和 一 个 位 置 移动 对 象 。 


占 


， 该 点 就 变 成 了 一 个 代表 最 终 位 置 的 新 位 置 点 。 


结果 如 下 : 


(2 ,5 


) 


Move 4 across and 2 down 


(6 ,3 


) 


7 
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代码 清单 7-4 在 二 维 空间 移动 一 个 位 置 点 
(http://jsbin.com/baxuvi/edit?js,console) 


var point1; 
Var point2; 
var move; 

Var showPoint,; 


move = function (point, change) { 


return { // 使 用 花 括 号 创建 一 个 对 象 ， 


立即 返回 值 


x: point.x + change .x，// 通 过 将 位 置 变化 值 应 用 到 初始 位 置 点 上 来 设 定 新 的 坐标 


y: point.y + change.y 
和 
笠 
showPoint = function (point) { 
console.log("( " + point.x + " , "+ point.y + " 
}; 


point1 = {x:2,Yy: 


5 }; 
point2 = move (point1，{ x 


: 4，y : -2 }); // 把 初始 位 


) 


:点 作为 一 个 变量 ， 把 位 


// 置 移动 值 作 为 对 象 字面 量 ， 


传递 给 函数 move 


ShowPoint (point1) ， 
console.log("Move 4 across and 2 down"); 


showPoint (Point2) ; 


在 以 上 代码 清单 7-4 中 ， 传 递 给 函数 move 的 第 二 个 参数 是 一 个 对 象 字 


| 


甸 星 {X:4,y:-2}。 


其 实 我 们 也 可 以 先 将 其 赋值 给 一 个 变量 ， 但 是 在 程序 中 我 们 仅 使 用 它 一 次 ， 因 此 使 用 变量 毫 
无 意义 ， 使 用 对 和 象 字面 量 就 是 够 了 。 这 两 个 位 置 点 的 坐标 如 图 7-5 所 示 。 


-10 -5 0 5 10 


图 7-5 初始 位 置 点 和 《向 右 移动 4， 向 下 移动 2 之 后 的 ) 新 位 


从 上 述 代 码 清单 7-4 可 见 ， 对 象 可 以 作为 参数 传递 给 函数 ， 也 可 以 


象 的 函数 。 在 下 一 节 内 容 中 ， 我 们 将 学 习 如 何 将 函数 设 定 为 对 象 的 属性 。 


7.3 方法 一 一 设置 函数 作为 对 象 的 属性 


在 JavaScript 中 ， 我 们 可 以 将 数字 、 字 符 串 和 对 象 作为 值 ， ee 


| 


作为 返回 值 从 函数 返 
回 。 像 这 样 ， 函 数 可 以 使 用 对 象 作 为 参数 ， 也 可 以 把 对 象 作为 函数 的 返回 


值 ， 这 就 是 使 用 对 


这 意味 着 我 们 不 仅 可 以 将 函数 作为 参数 进行 传递 ， 可 以 将 函数 作为 其 他 函数 的 返回 值 ， 还 
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以 将 函数 设置 为 对 象 的 属性 。 在 本 节 中 ， 将 继续 探讨 使 用 对 象 的 函数 ， 读 者 将 看 到 一 个 将 函 
数 设 置 作为 对 象 属性 的 示例 。 


7.3.1 命名 空间 一 一 将 相关 函数 组 织 到 一 起 

下 面 我 们 编写 一 些 函 数 对 控制 台 上 的 文本 进行 格式 化 。 显 示 文 本 是 交互 式 控 制 台 应 用 的 一 个 
重要 内 容 ， 因 此 格式 化 函数 的 数量 也 会 越 来 越 多 。 首 先 ， 学 习 两 个 非常 简单 的 函数 : blank， 用 
于 返回 一 个 空 字 符 串 ，newLine， 用 于 返回 一 个 换行 符 。 

当 几 个 函数 都 与 同一 个 工作 相关 时 ， 最 好 将 它们 收集 到 一 起 。 为 此 ， 我 们 可 以 将 每 个 函 
数 设 置 为 某 个 对 象 的 属性 ， 该 对 象 称 为 spacer: 


var spacer = {}; 


一 旦 我 们 拥有 了 一 个 对 象 ， 就 可 以 将 函数 设置 为 该 对 象 的 属性 。 首 先 ， 用 下 面 这 个 函数 
来 返回 一 个 空 字符 串 : 


spacer.blank = function () { 
return Vy 


}; 
图 7-6 所 示 为 如 何 创 建 该 函数 ， 并 将 其 赋值 给 对 象 spacer 的 属性 blank。 


圆 点 运算 符 访问 对 创建 一 个 函数 来 返 


nn 回 一 个 空 字符 串 
spacer blans Function (On frecurn 


将 右 侧 的 函数 分 配给 左 侧 的 属性 


图 7-6 创建 一 个 函数 ， 并 将 其 赋值 给 一 个 对 象 的 属性 


有 时 ， 我 们 需要 在 字符 串 中 包含 换行 符 ， 以 便 分 隔 开 多 行内 容 ，" \n" 为 换行 符 。 以 下 
函数 的 返回 值 就 是 这 样 一 个 换行 符 : 


spacer.newLine = function () { 
return "\n"; 


}; 
现在 我 们 已 经 将 两 个 函数 设置 为 对 象 spacer 的 属性 。 像 这 样 ， 使 用 一 个 对 象 将 几 个 函数 
收集 在 一 起 ， 称 之 为 命名 空间 Cnamespace)。 函 数 newLine 和 blank 都 属于 命名 空间 spacer。 
我 们 依然 可 以 通过 添加 圆 括号 的 方法 来 调用 这 些 函数 : 


console.log(spacer.blank ()); 
console.log("Linel'" + spacer.newLine() + "Line2"),; 


console.log(spacer.blank ()); 


该 代码 段 会 生成 以 下 输 昌 


压 


79 


91 


JavaScript 开发 实战 


不 必 如 上 例 所 示 ， 把 各 函数 逐一 添加 到 一 个 命名 空间 中 。 我 们 可 以 使 用 对 象 字面 量 语 


句 ， 也 可 以 使 用 花 括号 包含 多 个 用 去 号 分 隔 的 键 - 值 对 来 设置 带 有 多 个 属性 的 命名 空间 ， 如 


下 所 示 : 
spacer = { 
blank: function () { 
eltur. SY 
}, 
newLine: function () { 
return "\n"; 
} 
本 


把 函数 设置 为 对 象 的 属性 称 为 方法 (methods)。 目 前 ， 对 象 spacer 拥有 两 个 方法 : blank 
和 newLine。 我 们 将 在 第 7.3.4 和 7.3.5 节 中 为 其 添加 更 多 方法 ， 并 在 JS Bin 上 进行 试验 。 
JavaScript 包括 许多 有 用 的 对 象 和 方法 。 在 扩展 对 象 spacer 之 前 ， 我 们 先 来 研究 Math 方 


7.3.2 


法 和 String 方法 。 


Math 方法 


Math 是 一 个 内 置 于 JavaScript 中 的 命名 空间 ， 提 供 所 有 与 数学 计算 有 关 的 属性 和 函数 。 


代码 清 s 


单 7-5 显示 运行 中 的 Math.min 和 Math.max 方法 ， 它 们 分 别 返 回 两 个 数字 中 较 小 的 数 


字 和 两 个 数字 中 较 大 的 数字 ， 程序 产生 以 下 输出 : 


> 


3 is smaller than 12 
-10 is smaller than 3 


代码 清单 7-5 使 用 Math.min 和 Math.max 
(http://jsbin.com/moyoti/edit?js,console) 


var showSmaller = function (numl, num2) { 


var smaller = Math.min (numl, num2); // 将 两 个 数字 中 较 小 的 数字 赋值 给 smaller 
var larger = Math.max (numl, num2); / /将 两 个 数字 中 较 大 的 数字 赋值 给 1arger 
console.log(smaller + " is smaller than " + larger); 


上 
showSsmaller (12, 3);，; 
showSmaller(-10, 3); 


Math.min 和 Math.max 一 起 使 用 有 助 于 确保 一 个 值 能 够 在 指定 范围 内 。 例 如 一 个 
lineLength 变量 必须 在 0 到 40 之 间 ， 包 含 0 和 40。 欲 强制 lineLength 大 于 或 等 于 0， 就 可 以 


使 用 : 
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lineLength = Math.max (0, lineLength) ; 


如 果 lineLength 大 于 0， 它 是 两 者 当中 最 大 的 ， 其 值 不 会 改变 。 但 是 ， 如 果 lineLength 


小 于 0， 则 0 是 两 者 当中 最 大 的 ，lineLength 将 被 赋值 为 0。 
类 似 地 ， 可 以 强制 lineLength 小 于 或 等 于 40: 


lineLength = Math.min (40, lineLength) ; 


以 下 代码 清单 7-6 显示 如 何 实现 上 述 对 数值 的 限制 。 函 数 line 的 返回 值 是 指定 长 度 的 分 隔 
线 ， 该 指定 长 度 必须 介 于 0 和 40 之 间 ， 当 指定 长 度 为 30，40 和 50 时 ， 会 产生 以 下 输出 : 


请 注意 ， 最 后 两 行 线 的 长 度 都 是 40。 尽 管 最 后 一 行 线 的 指定 长 度 是 50， 但 是 函数 line 


将 长 度 限 制 为 40。 


SG 代码 清单 7-6 使 用 Math.min 和 Math.max 来 限制 参数 
I (http:/jsbin.com/qiziyo/edit?js,console) 


var line = function (lineLength){ / /确保 0 大 于 或 等 于 0 


var line = " ===================================== 


lineLength = Math.max(0, lineLength),; 


lineLength = Math.min(40，1lineLength) ; // 确 保 1ineLength 小 于 或 等 于 40 
return line.substr(0, lineLength); // 使 用 substr 字符 串 方 法 返回 一 条 正 
// 确 长 度 的 分 隔 线 


} 


console.log(line(30)); 
console.log(line(40)); 
console.log(line(50)); 


以 上 代码 中 使 用 substr 方法 来 返回 字符 串 的 一 部 分 ， 详 细 内 容 将 在 下 一 节 


讨论 。 


针对 各 种 各 样 常用 的 数学 任务 ，JavaScript 拥有 大 量 的 Math 方法 ， 读 者 可 以 在 以 下 网 址 


查阅 : www.room51.co.uk/js /math.html。 


7.3.3 ”String 方法 


针对 用 户 想 要 创建 的 每 一 种 字符 串 ，JavaScript 都 提供 了 具体 的 方法 。 这 些 函 数 有 助 于 


- 


程序 员 以 各 种 方式 操作 字符 串 。 以 下 代码 清单 7-7 使 用 toUpperCase 方法 将 字符 串 转 换 为 大 


写字 母 ， 如 下 所 示 : 
>Jupiter becomes JUPITER 


坊 ”代码 清单 7-7 将 字符 串 转换 为 大 写字 母 
Wy (http://jsbin.com/jizaqu/edit?js,console) 


Var planet = "Jupiter"; 
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Var bigPlanet = 


planet .toUpperCase () ; 


// 使 用 圆 点 运算 符 在 planet 字符 串 上 
// 调 用 方法 toUpperCase 


console.log(planet + " becomes " + bigPlanet); 


如 上 述 代码 所 示 ， 我 们 可 以 使 用 圆 点 运算 符 在 planet 字符 串 上 调用 方法 。 作 为 一 种 方 
法 ，toUpperCase 能 够 使 用 其 所 在 变量 planet 的 值 ， 因 此 无 需 将 planet 作为 圆 括号 中 的 参数 
传递 给 该 函数 。 

虽然 String 方法 可 以 作用 于 其 所 在 的 变量 ， 但 这 些 方法 依然 是 函数 ， 因 此 也 可 以 向 它们 


传递 参数 。 图 7-7 所 示 为 substr 方法 如 


substr 使 
message 的 什 


message.substr( 3, 


可 使 用 


和 两 个 参数 的 值 。 


substr 也 使 用 了 圆 
括号 中 间 的 参数 


message 的 值 


2 


图 7-7 方法 可 以 使 用 划 


所 在 变量 的 值 以 及 参数 的 值 


以 下 代码 清单 是 


>choose to go 


代码 清单 7-8 找到 子 字 符 串 


Var message = 


个 使 用 substr 方法 的 示例 ， 


在 控制 台 上 显示 一 个 子 字 符 串 ， 如 下 所 示 : 


(http://jsbin.com/mesisi/edit?js,console) 


"We choose to go to the Moon!",; 


console.log (message.substr(3, 12)); 
substr 方法 接受 两 个 参数 ， 原始 字符 串 中 的 起 始 位 置 和 需要 返回 的 字符 数 。 当 指定 一 个 
字符 在 字符 串 中 的 位 置 时 ， 计 数 为 零 ， 即 第 一 个 字符 是 位 置 0， 第 二 个 字符 是 位 置 1， 第 三 
个 字符 是 位 置 2， 以 此 类 推 (字符 串 从 零 开 始 计数 似乎 有 点 奇怪 ， 但 是 在 编程 语言 中 这 确实 
是 很 常见 的 做 法 )。 
0 1 2 3 4 5 6 7 8 9 10 tl 12 13 14 
W © C h 0 0 S © t 0 g 0 


substr (3，12) 从 位 置 3 处 的 字符 c 开 


到 位 置 14。 


台 ， 返 回 一 个 长 度 为 12 的 字符 串 ， 即 从 位 置 3 


其 实 ， 不 必 像 这 样 花 费 大 量 的 时 间 去 数字 符 串 中 某 字 符 的 位 置 。 我 们 可 以 改 用 indexOf 
方法 来 返回 字符 串 中 某 个 指定 字符 第 一 次 出 现 的 位 置 
下 一 个 代码 清单 7-9 中 使 用 indexOf 来 查找 字符 1 M 在 字符 串 中 的 位 置 ， 然 后 将 位 置 传递 
给 substr 以 获取 长 度 为 3 的 子 字符 串 ， 在 控制 全 上 生成 牛 的 叫 声 Moo。 
> “代码 清单 7-9 ”使 用 indexOf 查找 字符 
Og (http://jsbin.com/bidabi/edit?js,console) 
var message = "The cow jumped over the Moon!"; 
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var charIindex = message.indexOf ("M" ) ; 


console.log(message.substr (charIindex, 3)); 


此 外 ， 还 可 以 使 用 indexOf 来 查找 超过 一 个 字符 长 度 的 搜索 字符 串 。 以 下 示例 使 用 了 代 
码 清单 7-9 里 面 的 变量 message 中 存放 的 字符 串 : 


message.indexOf ("cow"); // Returns 4 
message.indexOof ("the'"); // Returns 20 
message.indexOf ("not"); // Returns -1 


请 注意 ，indexOf 是 区 分 大 小 写字 母 的 ， 因 此 the 和 The 是 不 同 的 ， 如 果 没 有 找到 字符 
串 ， 则 返回 -1。 

如 同 Math 一 样 ，JavaScript 中 有 很 多 String 方法 ， 读 者 可 以 到 本 书 的 在 线 网 站 上 查询 ， 
网 址 如 下 : www.room51.co.uk/js/string-methods.html。 

那么 ，String 是 对 象 吗 ? 

在 代码 清单 7-7 中 ， 将 字符 串 “Jupiter” 赋 值 给 变量 planet， 然后 调用 toUpperCase 方 
法 : planet.toUpperCase()。 
既然 方法 是 设置 为 对 象 属性 的 函数 ， 那 么 我 们 如 何 调用 字符 串 上 的 方法 ? 
其 实 ， 在 幕后 ， 每 当 我 们 访问 一 个 字符 串 值 时 ，JavaScript 就 会 创建 一 个 特殊 的 对 象 String 
来 包装 这 个 值 ， 该 对 象 包括 所 有 String 方法 。 一 旦 执行 完 这 个 语句 ， 该 对 象 即 被 销毁 。 

所 以 ，String 并 不 是 对 象 ， 而 是 JavaScript 为 我 们 提供 的 一 些 有 用 的 属性 和 方法 。 
7.3.4 ”spacer 一 一 将 更 多 的 方法 收入 命名 空间 

在 第 7.3.1 节 中 ，spacer 收入 了 两 个 函数 blank 和 newLine， 下 面 可 以 再 添加 一 些 有 趣 的 
函数 来 使 输出 格式 更 加 美观 。 

(1) line 是 一 个 升级 版 的 行 分 隔 函 数 ， 可 以 返回 一 条 指定 长 度 的 线 ， 指 定 长 度 在 0 到 40 
个 字符 之 间 ， 可 选 字符 有 五 种 :“*”“+”“=””“- ”或 “” 如 下 所 示 ; 


spacer.line(10, "*"),，; 


spacer.line(6, "+"); 


> 炎炎 火炎 火炎 火炎 火炎 


> “十 十 十 十 十 十 


(2) wrap 函数 的 返回 值 为 指定 长 度 的 文本 ， 该 文本 的 首尾 可 以 采用 指定 字符 ， 如 下 
所 示 : 


spacer.wrap ("Saturn", 10, "="); 
spacer.wrap ("Venus", 12, "-")， 
spacer.wrap ("Mercury", 14, "+"); 
> 三 Saturn = 
> - Venus - 


> + Mercury 十 


(3) box 函数 的 返回 值 为 指定 长 度 的 文本 ， 该 文本 的 首尾 为 指定 字符 ， 并 在 上 面 和 下 面 
各 有 一 行 该 指定 字符 ， 形 状 好 似 将 该 文本 装 在 字符 框 内 ， 如 下 所 示 : 
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spacer.box("Saturn", 10, "="); 
spacer.box("'Venus", 12, "-"); 


以 下 代码 清单 7-10 是 spacer 命名 空间 中 这 些 新 方法 的 代码 。 请 注意 spacer.wrap 使 用 
spacer.line 来 填充 文本 与 空格 字符 ;spacer.box 使 用 spacerline 和 spacer.wrap 来 生成 其 框 轮 
万。 该 代码 清单 可 以 帮助 读者 详细 了 解 如 何 使 用 这 些 新 方法 。 
代码 清单 7-10 将 若干 函数 作为 对 象 的 属性 
(http://jsbin.com/kayono/edit?js,console) 


var spacer ={ 


blank: function (){ // 返 回 一 个 空 字符 串 
return "",; 

}, 

newLine: function (){ 
return "\n"; // 返 回 一 个 换行 符 

}, 

line: function (length, character){ // 返 回 一 个 指定 长 度 的 字符 
War longString 二 必 炎 炎炎 类 类 炎炎 炎炎 炎炎 炎炎 类 炎 大 类 类 类 类 类 类 光 央 央 炎 类 类 大 光 尖 大 类 类 类 大 类 类 类 大 上 > 


longString += "---------------------------------------- 2 


OngStrLng 半 二 三 二 二 三 二 三 二 二 三 三 三 三 二 二 三 二 二 二 三 二 三 三 三 三 三 三 三 三 忆 三 二 三 三 三 三 三 三 三 三 下: 
longString += "+ 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 
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length = Math.max(0, length); 

length = Math.min(40, length); 

return longString.substr (longSstring.indexOf (character), length); 
}; 
wrap : function (text, length, character){ // 使 用 空格 和 新 增加 的 首 


// 尾 字符 来 填充 文本 
Var padLength = length - text.length - 3; 
var wrapText = character + " " + text; 
wrapText += spacer.line (padLength, " "),; 
wrapText += Character， 
return wrapText; 
}， 
vbox: function (text，1length，charactezr){  // 将 文本 置 于 指定 字符 形成 的 框 内 
Var boxText = Spacer.newLine () ; 


boxText += spacer.line(length, character) + Spacer.newLine () ; 
boxText += spacer.wrap (text, length, character) + spacer.newLine(); 


boxText += spacer.line(length, character) + spacer.newLine(); 


return boxText; 
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} 
}; 
console.log(spacer.box("Mercury"，11, "=")); // 测 试 box 方法 
console.log(spacer.box("Mars", 11, "*")); 
小 贴 士 


请 注意 wrap 和 box 方法 按照 相同 的 顺序 来 使 用 以 下 几 个 参数 : text、length 和 
character。line 方法 虽然 只 用 到 这 三 个 参数 中 的 两 个 ， 但 次 序 未 变 : length 和 character。 这 
样 有 意识 地 为 参数 排序 可 以 有 效 降 低 在 调用 方法 时 的 出 错 率 。 


7.3.5 ”进一步 探索 命名 空间 
命名 空间 中 的 这 些 新 方法 究竟 如 何 运作 ? 我 们 充满 好 奇 ， 勇 敢 地 深入 探索 一 下 。 别 访 


了 ， 我 们 拥有 JS Bin， 在 JavaScript 面板 的 控制 面板 提示 符 下 我 们 可 以 大 胆 地 实验 。 例 如 ， 
针对 以 下 line 方法 ， 可 以 首先 在 控制 台 提示 符 下 对 变量 longString 进行 声明 和 赋值 : 


>var longString = "*** 火 火炎 火炎 炎炎 类 一 一 一 一 一 一 一 一 一 二 = 二 = 二 二 二 二 二 = 十 十 十 十 十 十 十 十 十 十 " 
然后 ， 可 以 试 试 ndexOf 方法 : 


>longString.indexOf ("*") 
0 
>longString.indexOf ("=") 
20 


放松 点 ， 别 紧张 。 即 使 刚 开 始 不 理解 也 不 必 担 心 ， 因 为 在 这 些 方法 中 出 现 了 很 多 新 概 
念 ， 只 要 坚持 下 去 ， 多 想 想 就 会 逐渐 理解 。 

1， line 方法 

在 wrap 和 box 方法 中 都 使 用 了 line 方法 。 该 方法 返回 一 个 指定 长 度 的 字符 串 ， 可 选 字 
符 有 5 种 :“*”“+” “=””“- ”或 “”; 


line: function (length, character) { 
Var longString = WT 湾 炎 淡淡 火炎 炎炎 火炎 炎炎 火炎 火炎 炎炎 火炎 火炎 炎炎 炎炎 类 风灾 类 炎炎 风灾 类 炊 灾 类 类 风 昌 >》 


longString += "---------------------- > 


LongSstring += "=========se======s======================"y 
longString += 1 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 0 7 
longString += " 1 
length = Math.max(0, length); 

length = Math.min(40, length); 


return longString.substr (longString.indexOf (character), length); 
} 了 
该 方法 首先 创建 了 一 个 由 所 有 字符 组 成 的 长 字符 串 。 具 体 做 法 是 一 次 次 地 使 用 t= 运算 符 
将 新 字符 串 附 加 到 现 有 字符 串 ， 结 果 是 变量 longString 最 终 成 为 以 下 模样 的 字符 串 : 


longString 二 炎炎 类 火炎 火炎 类 类 类 一 一 一 一 一 一 一 一 一 一 二 二 二 二 二 二 二 二 二 二 十 十 十 十 十 十 十 十 十 十 My 


A 


局 


晶 所 限 ， 以 上 缩短 版 的 longString 中 ， 每 种 字符 只 显示 10 个 ， 而 实际 上 该 方法 中 每 种 
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字符 会 显示 40 个 。 该 代码 中 还 使 用 了 字符 串 方 法 indexOf 来 查找 在 调用 line 时 所 指定 的 字 
符 第 一 次 出 现 的 位 置 。 下 例 正 是 使 用 了 上 面 缩短 版 的 longString 字符 串 : 
longString.indexOof ("*"); // 0 
longString.indexOof ("-"); // 10 
longString.indexOof ("="); // 20 
longString.indexOof ("+"); // 30 
longString.indexOof(" "); // 40 


在 已 经 找到 指定 字符 首次 出 现 的 位 置 时 ， 就 可 以 使 用 substr 来 抓 取 指定 长 度 的 子 字 


EX 

款 
了 
过 


longstring.substr(10, 6); // ------ 
longString.substr(30, 3); // +++ 


但 是 line 方法 中 不 能 使 用 字面 值 , 需要 使 用 形 参 length 和 character， 以 便 在 调用 该 函数 
时 疝 其 传递 实 参 : 


// 得 到 第 一 个 匹配 字符 的 位 置 
var firstChar = longString.indexOf (character); 


// 从 第 一 个 匹配 字符 开始 ， 获 取 所 需 长 度 的 字符 串 


// 子 和 从 
var requestedLine = longString.substr(firstChar, length); 
以 上 代码 中 使 用 了 更 多 的 变量 ， 看 似 可 使 代码 更 易于 理解 ， 但 其 实 并 非 真正 需要 这 些 额 
外 的 变量 。 在 以 下 代码 中 ，line 找到 子 字符 串 并 同时 返回 值 ; 


过 


return longString.substr(longString.indexOf (character), length); 


请 注意 ， 空 格 是 一 个 可 用 字符 ， 可 以 用 来 填充 控制 台 上 的 标题 和 带 框 形状 。 以 下 wrap 
方法 就 是 使 用 line 实现 了 上 述 效 果 。 

2. wrap 方法 

为 了 形成 一 些 带 框 文本 的 中 间 行 ，wrap 方法 返回 一 个 指定 长 度 的 字符 串 。 参 数 character 
指定 该 字符 串 的 第 一 个 和 最 后 一 个 字符 ; 


wrap : function (text, length, character) { 
Var padLength = length - text.length - 3; 


var wrapText = character + " " + text; 


wrapText += spacer.line (padLength, "™ "); 
wrapText += character; 


return wrapText; 


六 
以 下 是 一 组 由 wrap 返回 的 长 度 递增 的 字符 串 : 


Ud 


spacer.wrap ("Neptune", 11, "="); // = Neptune = 
spacer.wrap ("Neptune", 12, "="); // = Neptune = 
spacer.wrap ("Neptune'", 13, "="); // = Neptune a 
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该 方法 在 最 后 一 个 字符 的 左边 填充 若干 个 空格 ， 来 确保 整个 字符 串 的 长 度 正 确 
(图 7-8 )。 


图 7-8 包 囊 文本 由 字符 + 空格 + 文本 + 填充 空格 + 字符 组 成 


要 想 找到 填充 空格 的 长 度 ， 请 从 整个 字符 串 的 所 需 长 度 入 手 ， 减 去 要 包 训 文本 的 长 度 ， 
然后 再 减 去 三 个 字符 ， 即 第 一 个 字符 、 空 格 和 最 后 一 个 字符 : 


Var padLength = length - text.length - 3; 


length 属性 可 用 于 所 有 字符 串 : 


var text = "Neptune'" 
text.length; // 7 


x 


计算 好 所 需 填 充 空 格 的 长 度 之 后 ，wrap 借助 于 line 方法 来 获取 指定 长 度 的 空格 字符 串 : 


Ud 


spacer.line (padLength, " "); 


wrap 方法 通过 连接 所 有 片段 字符、 空格 、 文 本 、 空格 和 字符 ) 来 构建 返 


el 


侍 串 。 
3. box 方法 
最 后 介绍 box 方法 。 该 方法 使 用 line 和 wrap 将 字符 串 包围 在 一 个 指定 长 度 的 方 框 中 : 


spacer.line (11, “*” )，; /类 业 炎 炎 类 灾 炎 炎炎 类 
spacer.wrap ( “Neptune” , 11,“x*”) ) // * Neptune * 
spacer.line (11, “*” )， /类 业 炎炎 类 灾 炎炎 火炎 


回 的 字符 串 在 控制 侣 上 可 以 跨行 显示 ; 


总 


该 方法 中 使 用 了 newLine， 以 便 单 个 


box: function (text, length, character) { 
var boxText = spacer.newLine(); 
boxText += spacer.line(length, character) + Spacer.newLine () ; 


boxText += spacer.wrap (text, length, character) + spacer.newLine(); 


boxText += spacer.line(length, character) + spacer.newLine(); 


return boxText; 


} 
非常 好 ! 现在 ，Spacer 命名 空间 已 经 拥有 许多 有 用 的 方法 ， 在 控制 台 上 显示 格式 化 的 信 
乱 。 这 些 方法 在 The Crypt 中 可 以 大 显 喘 手 。 赶 紧 试 试 吧 ! 
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7.4 The Crypt 一 一 将 玩家 对 象 作 为 参数 


在 本 章 中 
识 应 用 于 游戏 
玩家 信息 。 


， 我 们 知道 JavaScript 对 和 象 可 以 用 作 参 数 、 返 回 值 和 命名 空间 ， 本 节 将 以 上 知 
The Crypt。 图 7-9 显示 了 本 节 内 容 的 重点 : 通过 使 用 带 有 对 象 的 函数 来 显示 
Players Places Maps 
ylaver variat place objects nking places 
: using functions 
yer objec place items Game 


showing player info 
Using return values 
player items 
Using objects 
Player Constructor 


图 7-9 The Crypt 中 的 游戏 元 素 


在 第 6 章 中 ， 我 们 构建 了 一 些 函 数 来 显示 游戏 中 玩家 的 信息 。 在 这 些 函 数 中 ， 针 对 不 同 


的 玩家 属性 使 用 了 不 同 的 参数 。 以 下 是 getPlayerInfo 函数 调用 : 


get 


PlayerIinfo(playerl.name, playerl.place, playerl.health),; 


在 本 草 ! 


get 


， 我 们 已 经 知道 ， 可 以 将 一 个 玩家 对 象 直接 作为 参数 进行 传递 ， 并 让 函数 来 选 


择 所 需 的 属性 。getPlayerInfo 函数 调用 就 会 变 成 : 


Playerinfo(player1); 


显然 ， 程 序 代码 变 得 更 加 人 简洁! 


我 们 知道 ， 在 spacer 命名 空间 中 有 一 些 好 用 的 方法 可 以 格式 化 文本 ， 例 如 box 和 wrap 


方法 。 如 下 所 示 ， 游 戏 中 玩家 的 各 种 信息 长 度 不 一 ， 地 点 信息 字符 串 有 可 能 是 最 长 的 ， 健 康 


值 字符 串 有 时 还 会 更 长 ， 如 何 才能 找到 合适 的 边框 长 度 来 包 右 这 些 信息 ? 


三 三 三 三 三 三 三 三 = 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 三 = 三 三 三 = > 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 十 


= kandra is in The Dungeon of Doom = > + Dax is in Limbo 十 


= kandra has health 50 二 > + Dax has health 40 + 


首先 ， 必 须 查 明 哪 一 行 字符 串 是 最 长 的 。Math. max 方法 可 以 解决 这 个 问题 : 


var longest = Math.max (place.length, health.length) ; 


不 要 忘记 两 端的 边框 和 空格 : 


var longest = Math.max (place.length, health.length) + 4; 


以 下 代码 清单 7-11 使 用 spacer 命名 空间 的 多 种 方法 ， 可 以 在 JS Bin 上 运行 。 
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代码 清单 7-11 使 用 对 象 显示 玩家 信息 
(http://jsbin.com/beqabe/edit?js,console) 


var getPlayerName = function (player) { 


return player.name; 


var getPplayerHealth = function (player) { 


return player.name + " hashealth " + player.health,; 


var getplayerPlace = function (player) { 


return player.name + " isin " + player.place; 


var getPlayerInfo = function (player，character) { /* 找 到 地 点 字符 串 和 健康 
* 值 字符 串 两 者 当中 哪 一 个 
* 比 较 长 
*/ 


Var Place = getPlayerplace (player); 

Var health = getPlayerHealth (player); 

Var longest = Math.max(place.length, health.length) + 4; 

var info = spacer.box(getPplayerName (player), longest, character); 


info += spacer.wrap (place, longest, character); 


info += spacer.newLine() + spacer.wrap (health, longest, character); 

info += spacer.newLine() + spacer.line(longest, character); 

info += spacer.newLine(); 

return info,; 
}; 
var Playerl = { name: "Kandra", place: "The Dungeon of Doom", health: 50 }; 
var player2 = { name: "Dax'", place: "Limbo", health: 40 }; 
console.log(getPlayerInfo (playerl,， "=") ) ;// 指 定 在 显示 玩家 信息 时 要 使 用 的 字符 
console.log(getPlayerIinfo(player2, "+")); 


7.5 本章 小 结 


哆 用 对 象 作为 参数 ， 并 在 函数 体内 访问 对 象 的 属性 : 


var getPlayetrHealth = function (player) { 


return player.name + " hashealth " + player.health,; 
}; 


getplayerHealth (player1); 


国 在 阴 数 体内 更 新 对 象 并 添加 新 属性 : 


Var calculateSizes = function (rectangle) { 
rectangle.area = rectangle.width * rectangle.height; 


rectangle.perimeter = 2 * (rectangle.width + rectangle.height); 


}; 
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国 使 用 关键 字 retum， 从 函数 中 返回 新 对 象 或 现 有 对 象 : 


var getRectangle = function (width, height) { 
return { 
width: width, 
height: height, 
area: width * height 


}s 
}; 
国 通过 将 函数 设置 为 对 象 的 属性 来 创建 方法 。 
国 使 用 对 象 作为 命名 空间 来 收集 相关 的 函数 和 属性 : 
var spacer = {}; 
spacer.newLine = function () { 
return "\n",; 
} 
国 使 用 Math 对 象 及 其 方法 ， 如 Math.max 和 Math.min。 
103 图 使 用 字符 串 的 length 属性 以 及 indexOf 和 substr 字符 串 方 法 。 
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第 8 竟 数组 : 将 数据 存 人 列表 


本 章 内 容 包括 ; 

图 对 值 进 行 分 组 

图 创建 数组 

图 访问 数组 中 的 元 素 

图 操作 数组 中 的 元 素 

图 使 用 forEach 访问 每 个 元 素 


本 书 前 几 章 的 内 容 都 是 关于 如 何 组 织 数据 以 及 如 何 组 织 程序 代码 。 在 本 章 中 ,我 们 将 继 
续 这 个 主题 ， 不 仅 将 各 个 项 目 分 组 ， 而 且 把 它们 按 顺 序 进 行 分 组 。 

在 游戏 The Crypt 中 ， 玩 家 终于 能 够 在 探险 途中 收集 他 们 所 找到 的 物品 了 ， 正 是 借助 数 
组 ， 他 们 才 开 启 了 宝贝 收藏 之 旅 。 


8.1 创建 数组 并 访问 元 素 


使 用 列表 是 编程 的 一 个 重要 部 分 。 在 现实 生活 中 ， 以 列表 形式 呈现 的 事物 数不胜数 ， 例 
如 博客 里 的 文章 、 测 验 中 的 问题 、 股 票 价 格 、 电 子 邮 件 、 文 件 、 推 特 和 银行 交易 等 等 。 事 实 
上 ， 以 上 刚刚 读 到 的 内 容 就 是 一 个 列表 。 在 列表 中 ， 有 时 候 顺 序 并 不 重要 ， 但 有 时 候 顺 序 又 
很 重要 。 例 如 ， 一 个 姓名 列表 如 果 只 是 一 个 团队 的 成 员 名 单 ， 并 没有 先后 顺序 ， 但是， 如果 
这 个 姓名 列表 是 一 个 比赛 的 排名 ， 那 么 顺序 是 非常 重要 的 ! 博 尔 特 (100 米 赛跑 冠军 ) 必 
须 排 在 第 一 个 。 与 许多 其 他 编程 语言 一 样 ， 在 JavaScript 中 ， 我 们 也 把 有 序列 表 称 为 数组 。 1104| 
数组 中 的 项 目 称 为 数组 元 素 ， 我 们 通常 会 以 某 种 方式 处 理 数组 元 素 ， 例 如 : 
(1) 对 每 个 元 素 执 行 一 些 操作 ， 例 如 在 控制 台 上 显示 该 元 素 ， 或 者 每 个 元 素 值 增加 
20%。 
(2) 只 找到 符合 条 件 的 某 些 元 素 ， 例 如 LadyGaga 的 所 有 推 文 ， 某 个 月 份 的 博客 帖子 ， 
或 者 回答 正确 的 问题 。 
(3) 将 所 有 元 素 合 并 成 一 个 值 ， 例 如 一 个 价格 列表 的 总 和 ， 或 每 场 比赛 的 平均 得 分 数 。 
JavaScript 中 的 数组 对 象 可 以 处 理 以 上 所 有 内 容 ， 而 且 不 仅 限 于 此 。 让 我 们 从 头 开 始 ， 
首先 了 解 如 何 创建 数组 。 


8.1.1 创建 数组 


要 创建 数组 ， 请 使 用 方 括号 。 创 建 之 后 ， 可 以 将 该 数组 赋值 给 一 个 变量 ， 以 便 在 代码 中 
引用 该 变量 ， 如 图 8-1 所 示 : 


= 


沁 
N 
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值 可 以 是 任何 数据 类 型 


uandrav plimkyv ee Ercuc eco 
数组 定义 用 逗号 将 各 数组 定义 
的 开始 个 值 分 隔 开 的 结束 
图 8-1 使 用 方 括号 创建 数组 


以 下 代码 列表 创建 了 两 个 数组 ， 并 在 控制 台 上 显示 ， 输 出 如 下 : 


加 


[3 二 872 


> ["Kandra", "Dax", "Blinky"] 


代码 清单 8-1 创建 数组 
(http://jsbin.com/cevodu/edit?js,console) 


Var Scores; 


var names; 


scores = [ 3, 1, 8, 2 ]; / /创建 一 个 数值 数组 ， 并 将 其 赋值 给 变量 scores 
names = [ "Kandra"， "Dax"， "Blinky" ] ;// 创 建 一 个 字符 串 数组 ， 并 将 其 赋值 给 变量 names 


console.log(scores); 
console.log (names); 


数组 元 素 可 以 是 数字 、 字 符 串 、 对 象 、 函 数 、 任 何 数据 类 型 、 混 合 类 型 甚至 是 数组 。 使 
用 逗号 来 分 隔 各 个 数组 元 素 。 正 如 花 括号 代表 对 象 ， 关 键 字 function 代表 函数 ，JavaScript 使 
用 方 括号 代表 创建 了 一 个 数组 。 创 建 之 后 ， 可 以 将 数组 赋值 给 变量 ， 将 其 设置 为 属性 ， 将 其 
包含 在 另 一 个 数组 中 ， 或 将 其 传递 给 函数 。 

代码 清单 8-2 创建 了 对 象 数组 ， 表 示 今 年 和 明年 分 别 打算 访问 的 地 方 ， 在 JS Bin 上 的 显 
示 如 图 8-2 所 示 。 


男 Fie- Addlibrary Share HTML CSS JavaScript Console “Output 


Console 
1 /> Adventures in JavaScript [[object Object] { 
“* Listing 8.92 


| -把 :Er country: "Egypt" 
w Using existing objects in an array y ByPpt ， 


1 Var nextYear = 


“/ 


var placel = { name : 
Var place2 = { name : 
var place3 = { name : 


"The Pyramids", country : "Egypt" }; 
"The Grand Canyon", country : "USA" }; 
"Bondi Beach", country : "Australia" }); 
var thisYear = [ placel, place2 ]; 
[ place3 ]; 


console.\log(thisYear); 


name: "The Pyramids" 

}, [object Object] { 
country: "USA", 
name: "The Grand Canyon" 


}] 


[[object Object] { 
country: 
name: 


”Australian， 
”Bond1i 


4 console.log(nextYear); 


}] 


Beach" 


图 8-2 JS Bin 显示 代码 清单 8-2 中 的 每 一 个 数组 
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代码 清单 8-2 ”在 数组 中 使 用 已 定义 的 对 象 
(http:/jsbin.comy/gizulu/edit2js,console) 


var placel = { name : "The Pyramids", country : "Egypt" }; 

var place2 = { name : "The Grand Canyon", country : "USA" }; 

var place3 = { name : "Bondi Beach", country : "Australia" }; 

var thisYear = [ placel，place2 ] ; // 创 建 一 个 对 象 数组 ， 并 将 其 赋值 给 变量 thisYear 
var nextYear = [ place3 ]; // 在 数组 中 可 以 有 零 个 或 多 个 元 素 


console.log(thisYear); 
console.1log (nextYear); 


8.1.2 ”访问 数组 元 素 

既然 可 以 创建 一 个 数组 并 将 其 赋值 给 一 个 变量 ， 就 可 以 将 该 变量 传递 给 一 个 函数 ， 例 如 
console. log。 正 如 我 们 需要 剥 开 检 子 皮 才 能 禁 取 里 面 的 柳 汁 ， 有 时 ， 我 们 也 需要 访问 数组 内 
部 的 某 个 元 素 。 这 时 ， 可 以 使 用 方 括号 ， 它 具有 以 下 双重 作用 : 在 定义 数组 时 ， 方 括号 用 于 
ee ete 

如 图 8-3 所 示 ， 我 们 使 用 索引 值 来 标识 每 一 个 元 素 ， 表 示 每 一 个 元 素 在 列表 中 的 位 置 。 
数组 中 第 一 个 元 素 的 索引 值 为 0， 第 二 个 元 素 的 索引 值 为 1， 依 此 类 推 。 我 们 可 以 把 索引 值 
看 作 是 距离 数组 开始 点 的 偏 移 量 : 第 一 个 元 素 距离 开始 点 为 0， 第 二 个 元 素 距 离开 始点 为 
1， 依 此 类 推 。 


index 0 index 1 index 2 index 3 


[ "Kandra" ， "Blinky" ， true 50 ] 


图 8-3 ”数组 中 的 每 一 个 元 素 都 有 一 个 索引 值 ， 从 0 开始 


要 通过 某 一 个 指定 索引 值 来 获取 元 素 的 位 置 ， 请 将 索引 值 置 于 方 括号 内 ， 方 括号 的 位 置 
在 变量 名 之 后 ， 如 图 8-4 所 示 。 


items [0] items [1] :items [2] items[3] 


Lems = "Kandra™ BlinkyT AR 七 KUe ’ 50 in 


图 8-4 ”使 用 方 括号 和 索引 值 来 访问 已 赋值 给 变量 的 数组 内 部 元 素 
在 以 下 示例 中 ， 我 们 创建 了 一 个 数组 ， 并 将 其 赋值 给 一 个 变量 : 


SEOores = [ 3; 工 8; 2 ]; 
要 获取 数组 中 第 三 项 的 值 : 8， 请 将 索引 值 2《〈 因 为 索引 值 是 从 0 开始 的 ) 放 在 变量 名 
后 的 方 括号 内 : 


scores[2]; 
我 们 可 以 将 scores[2] 赋 值 给 另 一 个 变量 ， 将 其 设置 为 对 象 的 属性 ， 将 其 用 于 表达 式 中 ， 
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或 者 将 其 作为 参数 传递 给 一 个 函数 。 代 码 清单 8-3 使 用 scores 数组 中 元 素 的 值 创建 字符 串 ， 
并 在 控制 台 上 显示 如 下 : 


> There are 4 scores: 


> The 
> The 
> The 
> The 


first score is 3 


second 


score is 1 


third score is 8 


fourth 


score is 2 


显然 ， 代 码 中 还 使 用 了 数组 的 length 属性 ， 显 示 该 数组 中 元 素 的 数量 为 4。 


代码 清单 8-3 
(http:/jsbin.com/qemufe/edit2js,console) 


访问 数组 元 素 


var Soeores EE [ 3 dy ‘87 2 ]; 
console.log("There are " + scores.length+ " scores:"); // 使 用 length 属 
// 性 来 显示 数组 中 元 素 的 数量 
console.log("The first score is " + scores[0]); // 数 组 中 第 一 个 元 素 的 索 
// 引 值 为 0 

console.log("The second score is " + scores[1]); 

console.log("The third score is " + Scores [2] ) ; 

console.log("The fourth score is " + scores[3] ) ;// 数 组 中 最 后 一 个 元 素 的 索引 

// 值 为 元 素 的 数量 减 1 

我 们 假设 有 一 个 day 数组 ， 数 组 元 素 是 五 个 工作 日 的 名 称 ， 即 星期 一 、 星 期 二 …… 星 期 


五 ， 如 下 所 示 。 现 在 想 要 得 到 一 个 星期 中 茶 一 天 的 名 称 ， 例 如 ， 第 四 天 是 星期 几 ? 


var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]; 


我 们 发 现 ，JavaScript 中 的 索引 值 与 元 素 的 名 称 之 间 存 在 不 匹配 。 例 如 ， 一 周 的 第 1 天 
索引 值 为 0， 一周 的 第 4 天 索引 值 为 3。 为 了 消除 这 种 别扭 的 感觉 ， 可 以 使 用 变量 
dayInWeek 作为 数组 的 索引 值 ， 如 下 所 示 : 


// 我 想 要 得 到 一 


dayIn 


eek = 4 


周 中 的 第 四 个 工作 日 


7 


但 是 ， 问 题 并 没有 完全 解决 。 使 用 dayInWeek 作为 数组 的 索引 值 ， 却 得 到 了 一 个 错误 的 


元 素 ， 由 索引 值 


以 下 代码 清单 8-4 


4 得 到 数组 中 第 5 个 元 素 : Friday。 


暴露 并 解决 了 这 个 问题 ， 在 控 和 


上 台 上 显示 了 两 行 信息 ， 第 一 行为 错 


误 信息 ， 第 二 行为 正确 信息 ， 如 下 所 示 : 


> Friday 


> Thursday 


3 “代码 清单 8-4 使 用 变量 作为 索引 
局 (http://jsbin.com/veyexa/edit?js,console) 


var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]; 
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var dayInWeek = 4; // 使 用 dayInWeek 变量 作为 索引 值 
console.log( days[ldayInWeek] ); 
console.log( days [dayInWeek - 1] );// 从 dayInWeek 中 减 1， 以 访 


数据 存 入 列表 


问 到 正确 的 元 素 


在 以 上 代码 中 ， 第 一 次 调用 console.log 会 显示 错误 的 一 天 ， 因 为 变量 dayInWeek 没有 考 


dayInWeek 中 减 1 就 解决 了 上 述 问题 ， 即 一 周 中 第 4 天 的 索引 值 为 3。 


问题 得 以 解决 ! 让 我 们 保持 良好 势头 继续 前 进 ， 攻 克 下 一 个 堡垒 。 当 地 铅 


虑 到 数组 是 从 0 开始 的 ， 索 引 值 从 0 开始 ， 而 不 是 从 1 开始 。 第 二 次 调用 console.log， 从 


笔 博物 馆 每 天 


都 在 记录 访客 的 数量 ， 他 们 想 编写 一 个 程序 ， 实 现 以 下 功能 : 针对 存放 在 数组 中 的 一 周游 客 


数量 ， 程 序 能 够 显示 指定 日 的 游客 数量 ; 


> There were 132 visitors on Tuesday 


我 们 决定 创建 一 个 函数 getVisitorReport 来 生成 报告 并 返回 值 。 然 后 ， 可 以 
显示 在 控制 台 、 网 页 或 电子 邮件 中 。 在 以 下 代码 清单 8-5 中 ， 将 生成 星期 二 的 


选择 把 该 报告 
报告 并 显示 在 


忌 开 


控制 合 上 。 


> ”代码 清单 8-5 将 数组 传递 给 函数 
加 (http://jsbin.com/bewebi/edit?js,console 


var getVisitorReport = function (visitorArray, dayInWeek){ 


// 包 括 两 个 


// 形 参 : visitorArray 用 于 传 
// 递 访客 数量 ，dayInWeek 用 于 


// 传 递 报告 中 是 星期 几 


Var days = | 
"Monday", 
"Tuesday", 
"Wednesday", 
"Thursday", 
"Friday" 
]; 
var index = dayInWeek - 1; 
Var visitorReport; 


visitorReport = "There were "; 


visitorReport += visitorArray[index] ; // 使 用 += 运 算 符 来 更 新 


//visitorReport: 将 更 多 的 
// 文 本 连接 到 visitorReport 当前 值 


VisitorReport += " visitors "; 
visitorReport += "on " + days [index]; 
return visitorReport; // 从 函数 返回 结果 


}3 


var visitors = [ 354, 132, 210, 221, 481 ]; 


var report = getVisitorReport (visitors，2);  // 获 取 星 期 二 的 报告 并 将 其 赋值 


// 给 变量 report 
console.log (report),; 


在 以 上 代码 中 ， 创 建 了 一 个 访客 数量 的 数组 ， 赋 值 给 变量 visitor， 并 将 大 


作为 参数 传递 
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给 函数 getVisitorReport。 在 函数 中 将 数组 赋值 给 变量 visitorArray， 用 于 生成 报告 。 函 数 
getVisitorReport 返回 报告 ， 并 赋值 给 变量 report， 显 示 在 控制 台 上 。 函 数 中 的 += 运 算 符 将 其 
右 1 中 ， 己 将 字符 串 赋值 给 visitorReport 变量 ， 所 以 += 将 其 
右 


侧 的 值 添加 给 其 堪 侧 的 变量 。 此 侦 
侧 的 值 连接 到 其 左 侧 的 变量 上 。 

如 上 所 示 ， 我 们 能 够 创建 一 个 数组 并 访问 它 的 元 素 。 当 数组 中 存 有 数据 时 ， 我 们 就 需要 
使 用 一 些 方法 对 数组 进行 相应 的 操作 ， 下 面 就 来 学 习 几 种 最 常用 的 数组 处 理 方法 。 


8.2 ”数组 方法 


数组 是 JavaScript 语言 提供 的 一 种 对 象 类 型 ， 用 于 管理 代码 清单 。JavaScript 还 提供 了 许 
多 可 以 与 数组 一 起 使 用 的 函数 。 我 们 还 记得 ， 当 函数 赋值 给 一 个 对 象 的 属性 时 ， 我 们 把 这 些 
函数 称 作 对 象 的 方法 ， 既 然 数 组 也 是 一 种 对 象 类 型 ， 那 么 它们 的 函数 也 可 以 称 作 方 法 。 

在 本 节 中 ， 将 看 到 只 有 几 个 方法 可 以 与 数组 一 起 使 用 : push、pop 和 splice 用 于 添加 和 
删除 元 素 ，slice 用 于 抓 取 连续 的 元 素 ，join 用 于 连接 数组 元 素来 形成 一 个 字符 串 ，forEach 
用 于 将 每 个 元 素 作为 参数 传递 给 指定 函数 ， 见 表 8-1。 谷 了解 更 多 数组 方法 和 示例 ， 请 访问 
本 书 的 相关 网 址 : www.room51.co.uk/js/array-methods.html。 


上 


表 8-1 数组 方法 


方 ” 法 含义 示 例 
push 将 元 素 追 加 到 数组 的 末尾 items .push ("Putmelast" ) ; 
pop 从 数组 末尾 删除 一 项 wasLast = items.pop() ; 
join 连接 数组 中 的 所 有 元 素 ， 在 每 两 个 元 素 之 间 插 入 一 个 字符 串 allltems = items.join(","); 
slice 从 现 有 数组 中 的 一 系列 元 素 截 取 创建 一 个 新 数组 。 传 入 截取 起 始 位 sot = Tenis eid (Sy; 

置 的 索引 值 和 终止 位 置 的 索引 值 | 0 
le 通过 添加 和 /或 删除 连续 元 素来 更 改 数组 。 传 入 开始 删除 元 素 的 索引 Gt dena. splotl 2 mewn 
E 值 ， 要 删除 元 素 的 数量 和 想 要 添加 的 元 素 0 ’ 

items .forEach (function (item) { 
forEach 将 每 个 元 素 依次 传递 给 指定 函数 console .log (item) ; 


下 面 ， 我 们 来 学 习 push、pop 和 join 三 个 数组 方法 。 


8.2.1 ”添加 和 删除 元 素 


在 以 下 代码 清单 8-6 中 ， 首 先 ， 创 建 一 个 空 数 组 ， 并 将 其 赋值 给 变量 items; 然后 ， 使 
用 push 方法 将 三 个 元 素 添加 到 该 数组 ， 将 完整 数组 显示 在 控制 全 上 ， 如 下 所 示 : 


> ["The Pyramids", "The Grand Canyon'", "Bondi Beach"] 


之 后 ， 再 使 用 pop 方法 删除 最 后 一 项 并 显示 ; 最 终 ， 将 整个 数组 再 次 显示 在 控 种 
这 时 各 个 元 素 连 接 在 一 起 形成 一 个 字符 串 ， 如 下 所 示 : 


一 


台 上 ， 


>Bondi Beach was removed 


> The Pyramids and The Grand Canyon 
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SS 。 代码 清单 8-6 使 用 push、pop 和 join 对 数组 进行 操作 
yy (http:/jsbin.com/faqabu/edit2js,console) 


var items = []; / /创建 一 个 空 数 组 ， 并 将 其 赋值 给 变量 items 


var item = "The Pyramids",; 


var removed; 


items.push (item) ; // 将 item 的 值 加 到 该 数组 的 末尾 
items .push("The Grand Canyon"); // 将 字符 串 加 到 该 数组 的 末尾 


items.push("Bondi Beach'" ) ; 
console.1og(items) 
removed = items.pop(); // 删 除 最 后 一 项 ， 并 将 其 赋值 给 变量 removed 


console.log(removed + " was removed"); 


console.log(items.join(" and ")); // 使 用 join 方法 连接 数组 中 的 所 有 元 素 ， 在 两 
/ /个 元 素 之 间 插入 字符 串 " angd " 

在 JavaScript 中 ， 可 以 使 用 push、pop 和 join 函数 作为 每 个 数组 的 属性 。 既 然 它们 是 数 
组 的 属性 ， 就 可 以 使 用 圆 点 运算 符 对 其 进行 访问 ， 因 此 可 以 使 用 圆 点 运算 符 来 调用 函数 ， 如 
items.push (itemToAdd )。 


8.2.2 ”截取 和 拼接 数组 


为 了 演示 slice 和 splice 这 两 种 数组 方法 ， 我 们 继续 使 用 上 面 的 度假 地 数组 ， 并 将 结果 
示 在 JS Bin 控制 台 上 。 我 们 知道 ， 在 控制 全 上 ， 输 入 回 车 键 (Enter〉 表示 要 执行 一 条 新 
语句 ， 但 是 ， 如 果 同 时 按 下 Shift 和 Enter 键 ， 就 会 实现 一 条 命令 中 的 换行 ， 而 不 是 执行 一 条 
新 的 语句 ， 因 此 ， 一 条 命令 可 以 跨行 显示 。 如 果 不 小 心 按 (Enter〉 键 执行 了 一 条 未 完成 的 i 
句 ， 可 以 按键 盘 上 的 向 上 第 头 来 检索 前 面 各 条 语句 。 在 控制 台 上 ， 用 户 输入 的 每 一 条 i 
是 以 > 作为 起 始 来 显示 的 。 控 制 台 自 动 显 示 每 个 调用 函数 的 返回 值 ， 并 没有 > 作为 起 始 ， 
中 用 粗 体 来 显示 这 些 返 回 值 : 


时 病 梁 室 引 


>var items = [ 
"The Pyramids", 
"The Grand Canyon", 
"Bondi Beach", 
"Lake Garda"] 
undefined 

>items 


["The Pyramids", "The Grand Canyon", "Bondi Beach", "Lake Garda"] 


slice 方法 只 是 截取 原始 数组 的 一 部 分 构成 一 个 新 数组 ， 对 原始 数组 不 做 更 改 。slice 方法 
有 两 个 参数 ， 第 一 个 参数 是 截取 所 需 第 一 个 元 素 的 索引 值 ， 第 二 个 参数 是 截取 不 需要 的 第 一 
个 元 素 的 索引 值 ， 如 下 所 示 。 别 愁 了 ， 第 一 个 元 素 的 索引 值 为 0。 


>items.slice(0, 2) 

["The Pyramids", "The Grand Canyon"] 
>items.slice(2, 3) 

["Bondi Beach"] 
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items .slice (2，3) 表明 截取 需要 索引 值 2 以 后 的 元 素 ， 但 不 需要 从 索引 值 3 


元 素 ， 换 句 话说， 只 需要 索引 值 为 2 的 元 素 。 


如 果 需 要 第 一 个 参数 之 后 的 所 有 元 素 ， 可 以 省 略 第 二 个 参数 。 如 果 想 要 整个 数组 ， 就 省 


略 两 个 参数 ， 如 下 所 示 : 


>items.slice(2) 
["Bondi Beach", "Lake Garda"] 
>items.slice() 


于 始 的 后 续 


["The Pyramids", "The Grand Canyon", "Bondi Beach", "Lake Garda"] 


splice 方法 确实 对 原始 数组 有 所 改变 ， 不 但 允许 从 数组 中 删除 项 目 ， 而 且 可 以 加 入 新 项 
目 。 要 删除 项 目 ， 需 要 两 个 参数 ， 第 一 个 参数 是 你 想 要 删除 的 第 一 个 元 素 的 索引 值 ， 第 二 个 


参数 是 你 想 要 删除 元 素 的 数量 。 该 方法 的 返回 值 是 由 这 些 被 删除 元 素 押 组 成 的 新 数组 ， 如 下 


所 示 : 


>items.splice(2, 1) 

["Bondi Beach"] 

>items 

["The Pyramids", "The Grand Canyon", "Lake Garda"] 
>items.splice(0, 2) 

["The Pyramids", "The Grand Canyon"] 

>items 

["Lake Garda"] 


想 要 将 新 元 素 插入 某 一 数组 ， 请 将 新 元 素 作 为 第 三 个 参数 添加 到 以 上 两 个 参数 之 后 。 在 


we 


以 下 示例 中 ， 不 删除 任何 项 目 : 


>items.splice(0, 0, "The Great Wall", "St Basil’s") 
[] 
>items 


["The Great Wall", "St Basil’s", "Lake Garda"] 
在 以 下 示例 中 ， 删 除了 一 个 项 目 : 


>items.splice(1, 1, "Bondi Beach", "The Grand Canyon'") 
["St Basil’s"] 


>items 


["The Great Wall", "Bondi Beach", "The Grand Canyon", "Lake Garda"] 


在 游戏 The Crypt 中 ， 我 们 将 使 用 slice 和 splice 来 操作 各 个 玩家 和 地 点 项 目 。 
8.2.3 ”使 用 forEach 访问 每 一 个 元 素 
如 果 只 是 想 在 控制 台 上 显示 一 系列 项 目 ， 我 们 可 以 手动 一 次 次 地 调用 函数 : 


showInfo(items [0] ) ; 
ShowInfo (Items [1] ) ; 
showInfo (items [2] ) ; 


98 


AS - 立 - 


第 8 章 数组 : 将 数据 存 入 列表 


但 是 ， 我 们 通常 并 不 能 提前 知道 列表 中 会 有 多 少 个 项 目 ， 所 以 不 能 对 showInfo 的 调用 
次 数 进行 提前 硬 编码 。 另 外 ， 随 着 元 素数 量 的 增加 ， 我 们 就 不 想 再 用 手动 方式 去 一 次 次 地 调 
用 函数 了 。 

因此 ， 需 要 一 种 方法 ， 使 JavaScript 能 够 为 列表 中 的 每 一 个 元 素 调用 函数 ， 不 论 元 素 的 
数目 有 多 大 都 没有 关系 。 这 正 是 forEach 方法 的 作用 所 在 。 以 下 示例 中 ， 使 用 forEach 方法 
为 items 数组 中 的 每 个 元 素 调用 showInfo， 这 样 也 就 不 需要 手动 一 次 次 地 调用 函数 了 : 


items.forEach (ShowInfo) ; 


forEach 方法 用 于 实现 数组 的 遍历 ， 即 依次 把 每 个 元 素 作为 参数 传递 给 括号 中 的 指定 函 
数 ， 如 图 8-5 所 示 。 


Items .forEach( showInfo ) ; 


1 [ 

"The pyramigs" ， "The Pyramids", "The Pyramids", 
"The Grand Canyon", he Grand Canyon" "The Grand Canyon", 
"Bondi Beach" "Bondi Beach" "Bongi Beach" 

I es I 


图 8-$ items.forEach 将 items 数组 中 的 每 个 元 素 传递 给 函数 showInfo 


以 下 代码 清单 8-7 显示 了 forEach 是 如 何 运 行 的 ， 即 如 何 将 items 数组 的 各 元 素 显示 在 
控制 台 上 ， 如 下 所 示 : 


> The Pyramids 
> The Grand Canyon 
> Bondi Beach 


一 


代码 清单 8-7 使 用 forEach 遍历 一 个 数组 
MW (http://jsbin.com/sokosi/edit?js,console) 


var items; // 使 用 关键 字 var 声明 两 个 变量 
var showInfo; 
items = [ // 使 用 方 括号 创建 数组 ， 并 将 其 赋值 给 变量 items 


"The Pyramids", 
"The Grand Canyon'", 
"Bondi Beach" 


]; 


showInfo = function (itemToShow) { / /使 用 关键 字 function 创建 函数 ， 并 
// 将 其 赋值 给 变量 showInfo 


console.log(itemToShow); 
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.forEach (showInfo) ; // 为 该 数组 中 的 每 个 元 素 调用 函数 showInfo 
在 代码 清单 8-7 中 ， 将 显示 每 个 项 目的 函数 赋值 给 变量 showInfo， 然 后 将 变量 showInfo 
作为 参数 传递 给 forEach。 
如 果 只 是 一 次 性 地 使 用 一 个 函数 并 将 其 作为 forEach 的 参数 ， 就 可 以 创建 该 函数 
并 将 其 直接 传递 给 forEach， 而 无 需 一 个 像 showInfo 这 样 的 额外 变量 。 在 以 下 代码 清单 
8-8 中 ， 将 函数 定义 直接 传递 给 forEach， 还 添加 了 额外 的 信息 使 输出 样式 更 加 美观 ， 如 
下 所 示 : 


> Dream destinations: 
> - The Pyramids 

> - The Grand Canyon 
> - Bondi Beach 


代码 清单 8-8 ”使 用 内 戏 函 数 调 用 forEach 
We (http://jsbin.com/yapecu/edit?js,console) 


Var items = [ "The Pyramids", "The Grand Canyon'", "Bondi Beach" ];，; 

console.log("Dream destinations:"),; 

items.forEach (function (item) { // 将 内 所 函数 传递 给 forEach 方法 
console.log("™ - "+ iem)， 

}); 


forEach 方法 实际 上 将 三 个 参数 传递 给 指定 的 函数 : 元 素 、 当 前 元 素 的 索引 值 和 整个 
数组 。 如 果 在 函数 定义 中 包含 更 多 的 形 参 ， 就 可 以 得 到 更 多 的 实 参 来 传递 给 forEach， 如 
下 所 示 : 


items.forEach(function (item, index, wholeArray) { 
// item 是 当前 传递 给 函数 的 元 素 
// index 是 当前 元 素 的 索引 值 
// wholeArray 与 items 完全 相同 


}); 


以 下 代码 清单 8-9 显示 了 这 三 个 参数 ， 使 用 forEach 将 players 数组 中 的 每 个 玩家 传递 给 
函数 showArguments， 得 到 以 下 输出 ; 


> Item: Dax 

> Index: 0 

> Array: Dax,Jahver,Kandra 
> Item: Jahver 

> Index: 1 

> Array: Dax,Jahver,Kandra 
> Item: Kandra 

> Index: 2 


> Array: Dax,Jahver,Kandra 
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第 8 章 数组 : 将 数据 存 入 列表 
代码 清单 8-9 使 用 由 forEach 传 来 的 参数 
My http://jsbin.com/suvegi/edit?js,console) 


var players; 
var showArguments; 


players = ["Dax", "Jahver", "Kandra"]; 
showArguments = function (item，index,，wholeArray){  // 包 含 更 多 的 形 参 来 得 到 
// 由 forEach 传 来 的 实 参 
console.log("Item: " + item); 
console.log("Index: " + index); 
console.log("Array: " + wholeArray); 


入 


players.forEach (showArguments); 


forEach 方法 其 实 是 在 调用 函 数 。 在 代码 清单 8-9 中 ，forEach 方法 为 players 数组 中 的 每 
个 元 素 调用 函数 showArguments。 尽 管 并 不 是 必须 使 用 三 个 参数 ， 但 它 总 是 将 三 个 参数 全 部 
传递 给 它 所 调用 的 函数 。 

我 们 也 可 以 不 使 用 变量 ， 直 接 在 数组 上 调用 像 forEach 这 样 的 数组 方法 。 以 下 代码 清单 
8-10 是 对 代码 清单 8-9 的 改写 ， 在 代码 清单 8-10 中 就 没有 将 数组 或 函数 赋值 给 变量 。 


僵 。 代 码 清单 8-10 使 用 由 forEach 传 来 的 参数 一 -紧凑 版 
(http://jsbin.com/pagahe/edit?js,console) 


["Dax", "Jahver'", "Kandra'"] .forEach (function (item, index, wholeArray) { 
console.log("Item: " + item); 
console.log("Index: " + index); 
console.log("Array: " + wholeArray); 


}); 

如 果 我 们 只 是 一 次 性 地 使 用 一 个 数组 和 函数 ， 如 代码 清单 8-10 所 示 的 紧凑 型 语法 似乎 
更 加 可 取 。 但 是 ， 代 码 清单 8-9 中 的 长 版 本 代码 更 加 易于 理解 ， 所 以 如 果 该 段 代 码 的 意思 在 
整个 程序 中 不 是 非常 清晰 明了 ， 最 好 还 是 选择 长 版 本 。 显 然 ， 采 用 

players.forEach (showScore) ; 
这 样 的 语句 能 够 帮助 自己 和 其 他 程序 员 更 好 地 理解 代码 。 

为 了 进一步 了 解 如 何 使 用 索引 值 参数 ， 请 去 逛 狗 代 码 清单 8-11 里 的 商店 (既然 打算 继 
续 冒 险 ， 总 需要 为 探险 多 买 些 装备 )。 这 次 需要 购买 四 种 物品 ， 单 价 各 不 相同 。 该 程序 用 于 
计算 和 显示 总 价 ， 如 下 所 示 : 

> The total cost is $41.17 


在 代码 清单 8-11 中 ， 使 用 两 个 数组 ， 一 个 数组 用 于 存放 购买 每 种 物品 的 数量 ， 另 一 个 
数组 用 于 存放 每 种 物品 的 单价 。 


全 代 码 清单 8-11 计算 购物 的 总 价 
(http://jisbin.com/zizixu/edit?js,console) 


Var getTotalBill = function (itemCosts, itemCounts){ 
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Var total = 0; 


itemCosts .forEach (function (cost, i){ // 在 函数 定义 中 包含 一 个 额外 的 
// 形 参 1， 用 来 传 入 索引 值 
total+= cost * itemCounts [i]; // 使 用 += 运 算 符 将 计算 结果 加 到 
// 变 量 total 的 值 上 
和 
return total; 
入 
var costs = [ 1.99, 4.95, 2.50, 9.87 ]: 
var numOfEach = [ 2, 1, 5, 2 ]; 


console.log("The total cost is $'" + getTotalBill(costs, numOfEach)); 


代码 清单 8-11 中 ， 使 用 索引 值 来 匹配 当前 所 购物 品 的 单价 和 物品 的 数量 。 为 了 匹配 无 
误 ， 两 个 数组 必须 采用 相同 的 次 序 。 读 者 应 该 已 经 注意 到 了 ，i 并 不 是 一 个 合适 的 变量 名 


称 ! 但 大 多 数 程序 员 都 喜欢 使 用 i、j 和 来 代表 索引 值 变 量 ， 使 输入 更 加 人 简捷， 因此 已 经 成 
为 一 个 成 熟 的 惯例 ， 当 他 人 阅读 你 的 代码 时 ， 也 会 自然 而 然 地 把 它们 看 作 是 计数 器 或 索引 。 


如 果 你 不 愿 遵 此 惯例 ， 就 是 喜欢 将 它们 命名 为 index 或 itemIndex， 或 其 他 名 称 ， 也 完全 没有 


问题 。 


作为 本 节 内 容 的 最 后 一 个 示例 ， 让 我 们 再 次 回 到 测验 问题 。 针 对 每 一 道 选 择 题 ， 都 需要 
给 应 试 者 呈现 一 个 选项 列表 〈 例 如 A、B、C、D)， 这 看 起 来 很 适合 采用 数组 和 forEach 方 
法 ， 见 以 下 代码 清单 8-12。 我 们 甚至 还 可 以 使 用 由 多 个 问题 选项 对 象 构 成 的 数组 。 下 面 先 以 
一 个 问题 为 例 ， 问 题 和 选项 显示 如 下 : 
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> What is the capital of France? 
> A - Bordeaux 

> Bs 

> C - Paris 


>D - Brussels 


代码 清单 8-12 ”显示 一 道 选择 题 
(http:/jsbin.comy/lobahu/edit2js,console) 


var displayQuestion = function (questionAndAnswer){ // 包 含 一 个 形 参 ， 用 于 传 入 
//questionAndAnswer 对 象 
var options = [ "A", "B", "Cn", "D", "E" ]; 
console.log (questionAndAnswer.question); // 通 过 参数 访问 
//questionAndAnswer 对 象 的 属性 
questionAndAnswer.answers.forEach(  // 使 用 forEach 访问 分 配给 answers 
// 属 性 的 数组 内 的 每 个 元 素 


function (answer, i){ 
console.log(options[i] + " - " + answer); 
} 
) 了 了 
} 
var questionl = { 
question : "What is the capital of Erance?"， // 将 数组 分 配给 answers 属性 


answers : [ 

"Bordeaux", 

"RTV ， 

"Paris", 

"Brussels" 

J 

CorrectAnswer : 
}; 


displayQuestion (que 


i 


"Paris" 


stion1); 


本 书 第 二 部 分 将 深入 探究 与 用 户 的 互动 ， 


届时 读者 会 看 到 


8.3 The Crypt 一 一 玩家 的 物品 数组 


在 本 节 中 ， 我 们 将 JavaScript 数组 知识 应 
重点 : 使 用 数组 显示 玩家 的 物品 。 


Players 


showing playeri 


player items 


Places Maps 


Game 


nfo 


Player Construct 


在 本 书 的 第 


部 分 ， 已 经 介 


图 8-6 ”The Crypt 中 的 游戏 元 素 


第 8 章 


绍 了 JavaScript 的 一 些 核心 概念 ， 使 用 这 些 概念 ， 


数组 : 将 数据 存 入 列表 


户 如 何 回答 问题 。 


到 游戏 The Crypt 中 。 图 8-6 显示 了 本 节 的 


我 们 可 以 


昌 玩 家 人 信息。 具体 来 说 ， 我 们 已 经 可 以 使 用 变量 来 存储 和 检索 


在 游戏 The Crypt 中 创建 和 使 月 


玩家 信息 ， 已 经 可 以 使 


家 收集 的 物品 放 入 一 个 列表 ， 使 月 


示 每 个 玩家 的 信息 。 
在 以 下 代码 清单 8-13 中 ， 


息 ， 拾 取 一 个 新 的 物品 ， 以 及 显示 更 新 的 信息 。 我 们 还 可 以 使 月 


对 象 将 玩家 属性 集合 在 一 起 ， 当 然 ， 我 们 也 应 该 可 以 使 


] 数 组 将 玩 


将 以 上 所 有 概念 结合 在 


上 数组 方法 来 添加 和 删除 列表 中 的 元 素 ， 然 后 使 用 函数 来 显 


起 : 创建 一 个 玩家 ， 显 示 玩 家 信 


出 内 容 进行 格式 化 处 理 ， 输 出 效果 如 图 8-7 所 示 。 


玩家 姓名 


玩家 的 健康 值 


物品 列表 


图 8-7 


玩家 姓名 四 周 的 方 框 


炎炎 炎炎 火炎 火炎 火炎 炎炎 炎炎 于 炎 尖 炎炎 火炎 火炎 大 炎炎 炎炎 炎炎 大 炎炎 火炎 大 
Kandra 
六 炎炎 六 炎炎 炎炎 炎炎 炎 灾 炎炎 灾 灾 六 灾 火炎 火炎 火灾 炎炎 炎炎 炎炎 灾 灾 火炎 火炎 
* Kandra is in The Dungeon of Doom * 
w Kandra has health 50 中 
炎炎 光 光 光 光 炎炎 炎 火 火光 炎炎 炎炎 火光 火炎 炎炎 火炎 火炎 淡淡 光 光 炎炎 炎炎 火光 

Items: 

- a trusty lamp 

- a rusty key 


炎炎 炎炎 炎炎 炎炎 炎炎 炎炎 炎炎 炎炎 炎炎 炎炎 炎炎 炎 克 炎炎 炎炎 炎炎 炎炎 炎炎 灾 光 


在 控制 台 上 显示 的 玩家 对 象 的 各 种 信息 


日 第 7 章 spacer 命名 空间 对 输 


ly 


地 点 信息 


9 


边框 
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为 了 节省 版 面 ， 在 代码 清单 8-13 中 省 略 了 spacer (因为 它 没有 任何 变化 )， 但 是 在 JS 
Bin 中 并 没有 省 略 。 此 代码 清单 以 第 7 章 中 代码 清单 7-11 为 基础 ， 添 加 了 一 项 新 功能 ， 列 出 
玩家 的 物品 。 


代码 清单 8-13 ”显示 玩家 的 物品 
(http://jsbin.com/mecude/edit?js,console) 


var getPlayerName = function (player) { 
return player.name; 
和 
var getPlayerHealth = function (player) { 
return player.name + " has health " + player.health; 
}; 


var getplayerPlace = function (player) { 


return player.name + " is in " + player.place; 
}; 
var getPlayerItems = function (player) { // 定 义 函 数 来 构建 一 个 字符 串 ， 
// 用 于 显示 玩家 的 物品 
VaritemsString = "Items:" + spacer.newLine(); 
player.items.forEach(function (item) { // 使 用 forEach 将 items 数组 
// 的 每 个 元 素 附加 到 该 字符 串 上 
itemsString += " - " + item + spacer.newLine(); 


}); 
return itemsString; 
var getplayerIinfo= function (player, character) { 


var place = getplayerplace (player); 


Var health = getPlayerHealth (player); 
Var longest = Math.max(place.length, health.length) + 4; 


var info = Spacer.box (getPplayerName (player), longest, character),; 
info += spacer.wrap (place, longest, character); 

info += spacer.newLine() + spacer.wrap (health, longest, character); 
info += spacer.newLine() + spacer.line (longest, character),; 

info += spacer.newLine(); 


info += " " + getPlayerItems (player);// 调 用 getPlayerItems, 将 items 
// 字 符 串 包含 在 玩家 信息 中 


info += spacer.newLine(); 
info += spacer.line(longest, character); 
info += spacer.newLine(); 


return info; 


var showPlayerInfo = function (player，character){  // 创 建 函 数 show 
//PlayerInfo， 将 信息 字 
// 符 串 显示 在 控制 台 上 
console.log (getPlayerIinfo (player, character)); 
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var blayetr1l = { 
name : "Kandra", 
place: "The Dungeon of Doom", 
health: 50， 


items : ["a trusty lamp"] // 给 玩家 一 件 物品 
je 
showPlayerInfo (playerl，"=") ; // 传 入 玩家 和 边框 字符 作为 实 参 ， 调 用 showPlayerInfo 
playerl.items.push("a rusty key"); // 使 用 push 在 items 数组 中 添加 一 件 


// 额 外 的 物品 
showPlayerIinfo(playerl, "*"),; 


现在 ，Player 对 象 包含 了 一 个 items 数组 : 


var playerl1 = { 
name: "Kandra", 
place: "The Dungeon of Doom", 
health: 50, 
items: ["a trusty lamp"] 


}; 


在 以 上 代码 中 ，items 数组 最 初 只 有 一 个 元 素 ， 通 过 使 用 push 数组 方法 为 其 添加 了 一 个 
新 元 素 : 


playerl.items.push("a rusty key"); 


getPlayerltems 使 用 forEach 将 items 数组 中 的 每 个 元 素 传递 给 一 个 函数 。 该 函数 使 用 += 
将 每 一 件 物品 添加 到 字符 串 ， 从 而 构建 了 一 个 玩家 全 部 物品 的 列表 : 


player.items.forEach (function (item) { 


itemString += " - " + item + spacer.newLine(); 
}); 
函数 showPlayerInfo 调用 getPlayerInfo 来 检索 玩家 信息 字符 串 ， 然 后 在 控制 台 上 显示 信 
自 
VCO 


现在 我 们 已 经 学 会 处 理 显 示 一 个 玩家 的 信息 。 下 面 ， 我 们 打算 构建 多 个 函数 的 集合 来 显 
示 多 个 玩家 的 信息 。 如 何 用 心 把 多 个 函数 组 织 到 一 起 ? 我 们 可 以 将 它们 收集 到 一 个 命名 空间 
中 。 既 然 它们 都 与 玩家 相关 ， 是 否 可 以 考虑 把 它们 包含 在 Player 对 象 中 ? 针对 多 个 类 似 对 象 
的 创建 问题 ，JavaScript 提供 了 一 种 简化 方法 : 构造 函数 。 这 就 是 下 一 章 的 内 容 ， 在 第 9 章 
中 ， 我 们 将 构建 玩家 在 该 游戏 中 所 探索 的 地 点 信息 。 


8.4 ”本 章 小 结 


图 创建 一 个 数组 ， 使 用 逗号 将 方 括号 之 间 的 各 个 值 进行 分 隔 ; 


[ "Kandra", "Dax'"，true，50 ] 


国 将 数组 赋值 给 变量 ， 然 后 通过 在 变量 名 后 的 方 括号 


的 索引 值 来 访问 数组 元 素 。 以 
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下 代码 会 显示 该 数组 中 的 “Dax” 元 素 : 


Var items = [ "Kandra", "Dax'", true, 50 ]; 


console.log(items{[1]); 


图 干 万 别 态 记 ， 数 组 元 素 的 索引 值 是 从 0 开始 的 ，items[1] 引 用 items 数组 中 的 第 二 个 


元 素 。 读 者 可 以 将 索引 值 视 为 与 数组 开头 的 偏 移 量 : 第 一 个 元 素 就 是 数组 的 开头 ， 
内 此 偏 移 量 为 0， 第 二 个 元 素 与 数组 开头 的 偏 移 量 为 1， 依 此 类 推 。 


国 JavaScript 为 我 们 提供 了 常用 的 数组 方法 ， 用 于 添加 、 删 除 、 连 接 和 遍历 数组 元 素 。 
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本 章 介 绍 的 数组 方法 有 push、pop、join、slice、splice 和 forEach。 


第 9 章 构 道 国 效 : 构建 市 有 因数 的 对 角 


本 章 内 容 包 括 : 

图 使 用 函数 创建 对 象 

国 关键 字 new 

图 使 用 构造 函数 创建 对 象 

图 特 珠 变量 this 

图 玩家 构造 池 数 和 地 点 构造 函数 


程序 中 常常 需要 创建 许多 彼此 相似 的 对 象 ， 例 如 一 个 博客 里 可 能 有 数 百 个 帖子 ， 一 个 日 

历 里 可 能 有 数 千 个 事件 。 相 应 地 ， 程 序 中 也 需要 有 函数 来 处 理 这 类 对 象 。 我 们 不 再 需要 像 第 

3 童 那样 ， 用 手动 方式 使 用 花 括 号 创建 每 一 个 对 象 ， 下 面 我 们 使 用 函数 来 简化 上 述 过 程 。 
我 们 想 要 把 : 


planet1l = { 
name: "Jupiter", 
position: 8, 
type: "Gas Giant" 


showPlanet = function (planet) { 
Var info = Planet.name + ": planet " + planet .position; 
info += " - " + planet.type; 


console.1log (info); 


}; 


showPlanet (planet1); 


改 成 : 


planetl1 = buildPplanet ("Jupiter'", 8, "Gas Giant"),; 
planet1.show(); 


在 以 上 代码 中 ，buildPlanet 函数 创建 了 一 个 行星 对 象 ， 并 自动 添加 了 show 方法 。 在 
buildPlanet 函数 体 中 为 对 象 定义 了 一 个 蓝图 ， 然 后 在 需要 时 使 用 该 蓝图 就 可 以 生成 一 个 新 对 
象 。 这 样 做 ， 有 利于 将 这 一 段 对 象 创建 代码 固定 保持 在 程序 中 的 某 一 个 地 方 ， 有 助 于 理解 、 
维护 和 使 用 该 代码 。 

可 见 ， 我 们 可 以 用 一 个 简单 的 函数 创建 许多 相似 的 对 象 。 其 实 ， 还 可 以 采用 更 好 的 方 
法 ， 就 是 使 用 构造 函数 。 正 因为 我 们 常常 需要 编写 函数 来 创建 对 象 ，JavaScript 中 有 一 个 内 


置 的 简化 方法 , 我 们 可 以 使 用 它 来 创建 和 显示 行星 对 象 ， 如 下 所 示 : 
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planetl1l = new Planet ("Jupiter", 8, 
planet1.show(); 

构造 函数 将 对 象 创建 变 为 标准 化 流程 ， 

方法 ， 使 我 们 更 容易 


具有 诸多 优点 : 构造 函数 提供 了 一 种 识别 对 象 的 
区 分 开行 星 、 玩 家 、 帖 子 和 地 点 对 象 ， 构造 函数 还 提供 了 一 种 方法 ， 使 


"Gas Giant") ; 


风 


我 们 能 够 使 用 原型 〈 详 见 本 书 第 四 部 分 ) 在 多 个 对 象 之 间 共 享 某 个 函数 。 
己 编写 函数 来 构建 对 象 ， 在 第 9.2 节 中 ， 将 探究 如 何 使 有 
现在 ， 我 们 开始 让 生产 线 转动 起 来 ! 


在 第 9.1 节 中 ， 将 介绍 如 何 
构造 函数 来 简化 构建 对 象 的 生产 流程 。 


9.1 使 用 函数 构建 对 象 


我 们 不 再 采用 手动 方式 使 用 花 括号 来 构造 每 个 对 象 ， 而 是 创建 一 个 函数 来 干 这 种 苦力 涡 
言 恩 ， 函 数 就 会 为 我 们 返回 一 个 轩 新 的 对 象 ! 在 大 型 程 
些 类 似 的 对 象 。 如 果 拥 有 这 样 
用 的 函数 ， 就 可 以 避免 一 次 次 的 重复 创建 工作 ， 而 且 当 我 们 以 后 需要 对 象 有 所 变化 时 ， 修 改 


儿 。 我 们 只 要 向 函数 传递 它 所 需要 的 
序 中 ， 我 们 可 能 会 在 代码 中 的 多 个 位 置 创建 


工作 也 会 变 得 轻松 许多 。 


9.1.1 节 展 示 了 一 个 简单 的 对 象 创建 函数 ，9.1.2 节 在 此 基础 


CLL 


nn 


lal 


个 可 以 多 次 调 


上 ， 为 创建 的 对 象 添加 了 一 


个 方法 。 
9.1.1 添加 属性 


图 9-1 显示 了 一 个 buildPlanet 函数 ， 它 可 以 帮助 我 们 创建 行星 对 象 。 我 们 只 需 将 某 一 行 


网 办 


星 数据 作为 参数 传递 给 该 函数 ， 就 会 返回 一 个 行星 对 象 ， 该 对 象 具 有 以 上 参数 的 属性 。 我 们 


于 . 证 /六 、\ 三 | 
上 开始 学 习 JavaScript， 就 已 经 可 以 创建 行星 了 ! 
Planet1l = buildPlanet (USIEETJ，5 ，cas Giant ) ， 
function (Wanme 昌 ，Position ,type ) 
var planet = {}; 1. 创建 一 个 空 对 象 
planet .name = Bname® ，; 
planet .position = position ; 
返回 值 替代 了 planet .type = EyBes ; 
函数 调 Equivalent to 
2. 将 参数 分 配给 属性 
planet .name = Wyupiterz® ， 
planet .position = = 有 
planet .type = "Gas Giant" ; 
return planet; 3. 返回 一 个 对 象 
planet1 = { 
name: "Jupiter", 
position: 5, 
type: "Gas Giant" 
}; 
图 9-1 buildPlanet 函数 创建 并 返回 一 个 对 象 
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以 下 代码 清单 9-1 显示 了 buildPlanet 函数 的 代码 。 请 注意 该 函数 如 何 始 于 创建 对 象 ， 目 
于 返回 对 象 。 


代码 清单 9-1 用 函数 来 创建 对 象 
yy (http:/jsbin.comyjiroyo/edit2js,console) 
var buildPlanet = function (name, position, type){ 
var planet = {}); / /创建 一 个 空 对 象 ， 为 正在 构造 的 新 行星 做 准备 
planet .name = name; // 使 用 传 入 的 参数 在 行星 对 象 上 设置 属性 


planet .position = position; 


planet .type = type; 


[五 


return planet; / /返回 对 象 ， 该 对 象 就 是 创建 完成 的 新 行星 
}; 


var planetl1 = buildplanet( // 调 j buildPlanet 函数 并 将 返回 的 对 象 赋值 给 
了 
//planet1 变量 


I 


"Jupiter", 

5， 

"Gas Giantn 
); 
console.log(planetl1 .name); 
console.log(planet1 .position),; 
console.log(planet1 .type); 


在 以 上 代码 中 ，buildPlanet 函数 所 采用 的 步骤 非常 有 助 于 我 们 理解 JavaScript 构造 函数 
如 何 简 化 对 象 创建 的 过 程 ， 详 见 第 9.2 节 中 的 构造 函数 。 在 此 之 前 ， 我 们 首先 需要 学 会 使 用 
一 些 方法 来 武装 我 们 刚刚 创建 的 对 象 。 


9.1.2 ”添加 方法 


除了 设置 一 些 初始 属性 ，buildPlanet 还 可 以 为 对 象 添 加 方法 。 请 注意 ， 方 法 其 实 是 一 个 
函数 ， 该 函数 被 赋值 给 对 象 的 属性 。 我 们 并 不 是 定义 一 个 外 部 函数 来 显示 关于 每 个 行星 对 象 
的 信息 ， 而 是 将 函数 嵌入 到 对 象 内 部 。 

在 以 下 代码 清单 9-2 中 ， 函 数 返 回 对 象 之 前 ， 为 每 一 个 行星 对 象 添 加 了 一 个 showPlanet 
方法 ， 输 出 如 下 所 示 : 


> Jupiter: planet 5 - Gas Giant 


>》 。 代码 清单 9-2 为 函数 创建 的 对 象 添加 方法 
(http://jsbin.com/zogure/edit?js,console) 


var buildPlanet = function (name, position, type) { 
var planet = {}; / /创建 一 个 空 对 象 ， 为 正在 构造 的 新 行星 做 准备 
planet .name = name; // 使 用 传 入 的 参数 在 行星 对 象 上 设置 属性 


planet .position = position; 


planet .type = type; 
planet .showPlanet = function (){ // 定 义 显示 函数 并 将 
Var info = planet.name; 


I 


赋值 给 showPlanet 属性 
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info += ": planet " + planet.position; 
info += " - " + planet.type; 
console.1log (info); 
}; 
return planet; // 返 回 对 象 ， 该 对 象 就 是 我 们 创建 完成 的 新 行星 


3 
var planetl1 = buildqPlanet ( 
"Jupiter", 
5， 
"Gas Giant" 
)s 
planet1.showPlanet (); // 使 用 圆 点 运算 符 和 圆 括号 调用 showPlanet 方法 


在 以 上 showPlanet 方法 中 ， 构 建 了 一 个 包含 行星 属性 (name、position 和 type) 的 信息 字 
符 串 ， 并 将 该 字符 串 记 录 在 控制 台 上 。 我 们 可 以 使 用 += 运 算 符 将 字符 串 附 加 到 info 变量 上 。 


我 们 可 以 针对 对 象 需要 的 功能 为 其 提供 尽 可 能 多 的 方法 。 每 次 调用 buildPlanet 时 ， 都 会 
返回 一 个 对 象 ， 该 对 象 具 有 在 程序 中 执行 任务 所 需 的 属性 和 方法 ， 也 就 是 说 ， 这 个 函数 能 够 


构造 出 各 种 人 类 想 要 的 行星 对 象 。 当 然 ， 我 们 也 不 能 太 贪 心 ， 不 是 吗 ? 


a 


以 下 代码 清单 9-3 使 用 buildPlanet 函数 构造 了 三 个 行星 (好 吧 ， 昌 然 还 算 不 上 是 一 条 生 


产 线 ， 但 就 是 这 个 思路 !)， 并 在 控制 台 上 显示 它们 的 详细 信息 : 


亚 


> Jupiter: planet 5 - Gas Giant 
> Neptune: Planet 8 - Ice Giant 


> Mercury: planet 1 - Terrestrial 


3 “代码 清单 9-3 ”由 三 个 构造 对 象 组 成 的 数组 


My (http://jisbin.com/jiweze/edit?js,console) 


var buildqPlanet = function (name, position, type){ // 定 义 一 个 与 代码 清单 9-2 
// 相 同 的 buildPlanet 函数 


var planet = {}); 
planet .name = name; 
planet .position = position; 
planet .type = type; 
planet .showPlanet = function () { 
var info = planet .name; 
info += ": planet " + planet.position; 
info += " - " + planet.type; 
console.1log (info),; 
> 
return planet; 
上 
var planets = [ // 创 建 一 个 行星 对 象 的 数组 ， 并 赋值 给 planets 变量 
buildPlanet( "Jupiter", 5, "Gas Giant™" ), 
buildPlanet( "Neptune", 


8, "Ice Giantn ), 
buildPlanet( "Mercury", 1, "Terrestrial" ) 
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]; 
planets.forEach (function (planet) { // 使 用 forEach 将 每 个 行星 对 象 传递 到 
//showPlanet 调用 函数 


planet.showPlanet () ; 


} ) ; 

以 上 代码 清单 9-3 创建 了 一 个 包含 三 个 元 素 的 数组 ， 这 三 个 数组 元 素 就 是 三 次 分 别 调 月 
buildPlanet 的 返回 对 象 。 将 该 数组 赋值 给 planets 变量 ， 然 后 使 用 forEach 遍历 该 数组 ， 这 样 
一 来 ， 就 不 需要 将 三 个 行星 分 别 赋值 给 三 个 变量 ， 而 只 需 通 过 数组 索引 值 就 可 以 访问 各 个 对 
象 《说 记 第 一 个 行星 的 索引 值 为 0)， 如 下 所 示 ; 


bene 


Planets [0] .name // "Jupiter" 
planets[2] .type // "Terrestrial" 


在 定义 buildPlanet 时 ， 我 们 将 对 象 创建 移动 到 一 个 函数 中 ， 一 旦 设置 好 对 象 的 属性 ， 该 
函数 就 会 为 我 们 返回 一 个 办 新 的 行星 。 由 此 可 见 ， 我 们 自己 编写 的 函数 可 以 为 我 们 创建 和 返 
回 对 象 。 比 这 更 令 人 高 兴 的 是 ，JavaScript 本 身 就 可 以 为 我 们 创建 和 返回 对 象 ， 如 何 实现 ? 
请 阅读 下 一 节 内 容 。 


9.2 ”使 用 构造 函数 构建 对 象 


在 上 一 节 中 ， 我 们 自己 编写 函数 构建 对 象 并 为 对 象 添加 方法 ， 切 实感 受 了 对 象 生 产 线 的 
大 致 模样 。 其 实 ， 用 这 种 方式 来 构建 对 象 的 做 法 非常 多 见 ， 以 至 于 JavaScript 为 程序 员 提 供 
了 标 i 为 造 函 数 。 

在 上 一 节 的 buildPlanet 函数 中 ， 我 们 先 创建 了 一 个 空 对 象 ， 然 后 为 其 设置 属性 ， 并 返回 
对 象 ， 如 下 所 示 : 


var buildPlanet = function (name, position, type) { 


var planet = {}; / /创建 一 个 空 对 象 
planet .name = name; // 

planet .position = position; // 设 置 属性 
planet .type = type; // 

return planet; // 返 回 对 象 


}; 
其 实 ，JavaScript 可 以 帮 我 们 免费 搞定 这 一 切 。 使 用 构造 函数 ， 它 将 创建 空 对 象 并 返回 
我 们 依然 可 以 设置 属性 ， 但 其 余 步骤 都 是 自动 完成 的 。 到 底 是 什么 秘密 武器 能 够 将 普 
函数 转换 为 构造 函数 ? 答案 是 两 个 关键 字 : this 和 new。 


9.2.1 构造 函数 


在 JavaScript 中 ， 定 义 构造 函数 与 定义 其 他 函数 没有 什么 差别 ， 只 是 在 调用 构造 函数 时 
要 在 前 面 加 一 个 关键 字 new。 假 设 我 们 已 经 拥有 一 个 Planet 函数 ， 就 可 以 采用 以 下 方式 创 
建 一 个 新 的 行星 对 象 : 
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Dlanet1l = new Planet ("Jupiter", 5, "Gas Giant"); 
planet2 = new Planet ("Neptune", 8, "Ice Giant"); 


从 上 例 可 见 ， 欲 将 Planet 函数 作为 构造 函数 使 用 ， 只 需 在 调用 Planet 之 前 添加 new 关键 


字 即 可 。 作 为 惯例 ， 构 造 函 数 名 称 的 首 字母 通常 采用 大 写字 母 ， 以 便 程 序 员 容易 辨识 某 函 数 
为 构造 函数 ， 在 调用 构造 函数 时 就 会 使 用 关键 字 new。 图 9-2 显示 构造 函数 如 何 自动 创建 并 


» 


127| 返回 一 个 对 象 。 


Planet1l = new Planet ( 人 ET ,15)， caSCEIEEED ) 
function (Piame), position , type ) 
// var this = {}; 1. JavaScript 自 动 
创建 一 个 空 对 象 
this.name = name 
this.position = Bosition ; 
$ i this.type = type | ; 
返回 值 赫 代 了 并 2 
国 数 训 
数 调 Equivalent to 
2. 你 将 参数 赋值 给 属性 
this.name = "Jupiter" ; 
this.position = Ss ; 
this.type = "Gas Giant™,; 
MH/recurcn Chisy 3. JavaScript 自 动 返 回 对 象 


planet1 = { 
name: "Jupiter", 
position: 5, 
type: "Gas Giant" 


I 


一 个 对 象 


图 9-2 使 用 关键 字 new 调用 构造 函数 ， 构 造 函 数 自动 创建 并 返 


以 下 代码 清单 9-4 显示 完整 的 Planet 构造 函数 以 及 使 用 new 调用 Planet。 


代码 清单 9-4 Planet 构造 函数 
(http://jsbin.com/bixico/edit?js,console) 


var Planet = function (name，Pposition，type){// 将 函数 赋值 给 变量 ， 该 变量 的 
// 首 字母 为 大 写字 母 
this.name = name; // 给 this 设置 属性 ，this 是 JavaScript 自动 创建 的 一 个 空 对 象 


this.position = position; 
this.type = type; 


this.showPlanet = function () { 
Var info = this.name + ": planet " + this.position; 
info += " - " + this.type; 


console.log (info); 


}; 
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var Planet = new Planet( // 使 用 new 关键 字 调 用 该 函数 ， 告 诉 JavaScript 将 


"Jupiter", 
5， 
"Gas Giant" 
); 
planet .ShowPlanet ()，; 


// 空 对 象 赋值 给 this 


在 以 上 代码 中 ， 当 使 用 new 调用 消 数 时 ，JavaScript 才 会 为 我 们 创建 一 个 空 对 象 ， 并 将 


其 分 配给 特殊 变量 this。 为 了 便于 理解 ， 我 们 可 以 假想 Planet 函数 隐藏 了 第 一 行 代码 : 


var this = {}; 


然后 ， 我 们 可 以 为 this 设置 属性 ， 如 同 之 前 在 buildPlanet 函数 中 为 planet 设置 属性 。 该 


函数 自动 返回 对 象 并 赋值 给 this， 
想 Planet 函数 隐藏 了 最 后 一 行 代码 


return this; 


因此 不 需要 添加 retum 语句 。 为 了 便于 理解 ,我 们 可 以 假 


当 执行 代码 清单 9-4 中 的 代码 时 ， 新 创建 的 对 象 将 蔡 换 对 Planet 构造 函数 的 调用 ， 新 对 


象 被 赋值 给 planet 变量 。 以 下 代码 


Var planet = new Planet( "Jupiter", 5, "Gas Giant'" ) ， 


就 变 成 : 


var planet = { 
name: "Jupiter", 
position: 5, 


type: "Gas Giant", 


showPlanet: function () { 


Var info = this.name + ": planet " + this.position; 


info += " - " + this.type; 


console.1log (info),; 


}; 


我 们 可 以 根据 需要 向 this 对 象 添 加 任意 数量 的 属性 和 方法 。 以 下 代码 清单 9-5 就 对 


Planet 构造 函数 进行 了 扩展 ， 为 生成 的 对 象 添加 了 moons 属性 和 addMoon 方法 : 


> Jupiter: planet 5 一 


> Moons: Io, Europa. 


var Planet = function 


this.name = name; 


Gas Giant 


代码 清单 9-5 在 Planet 构造 函数 中 包含 一 个 moons 数组 
(http://jsbin.com/wiguya/edit?js,console) 


(name, position, type) { 


this.position = position; 
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this.type = type; 


this.moons = [{]; / /创建 一 个 空 数组 ， 并 将 其 赋值 给 属性 moons 
this.showPlanet = function () { 
Var info = this.name + ": planet " + this.position; 
info += " - " + this.type; 


}; 


console.1log (info); 
console.log ("Moons:"+this.moons.join(',') + "."); // 将 moons 数组 
// 的 元 素 连接 形成 
// 一 个 字符 中 


this.addMoon = function (moon) { 


}; 
二 


this.moons .push (moon) ; // 使 用 push 方法 将 新 的 moon 添加 到 moons 数组 


var planet = new Planet( "Jupiter'", 5, "Gas Giant'" ) ; 


planet .addMoon ("Io"); 


planet .addMoon ("Europa"); 


planet .ShowPlanet () ; 


在 第 8 章 中 


， 我 们 知道 push 方法 用 于 在 数组 末尾 添加 一 个 新 元 素 ，join 方法 用 于 将 数组 
中 的 所 有 元 素 连接 在 一 起 形成 一 个 字符 串 ， 并 在 每 两 个 元 素 之 间 插 入 可 选 的 分 隔 符 ， 能 和 否 使 
用 这 些 方法 更 新 构造 函数 ? 


行星 们 ! 卫星 们 ! 勤奋 无 止境 ， 让 我 们 继续 努力 …… 


9.2.2 ”使 用 Planet 构造 函数 创建 一 个 新 此 界 

以 下 代码 清单 9-6 更 新 了 Planet 构造 函数 的 用 法 。 当 调用 addMoon 时 ， 可 以 在 moons 
数组 的 开头 添加 新 的 卫星 : unshift， 这 是 一 种 我 们 以 前 从 未 见 过 的 数组 方法 。 首 先 ， 创 建 三 
个 行星 对 象 并 将 其 赋值 给 变量 planet1，planet2 和 planet3， 然 后 分 别 调用 showPlanet。 以 下 


只 是 部 分 输出 ， 请 注意 这 些 卫 星 的 顺序 : 


> Jupiter 


> Planet 5 - Gas Giant 


> Moons: Europa, Io. 


代码 清单 9-6 使 用 构造 函数 创建 多 个 行星 


(http://jsbin.com/wewewe/edit?js,console) 


var Planet = function (name, position, type) { 


this.name = name; 


this.position = position; 


this.type = type; 


this.moons = []; 


this.showPlanet = function () { 
console.log(this.name); 
console.log("Planet " + this.position + " - " + this.type); 
console.log('"Moons: " + this.moons.join(', ') + "."); 


114 


上 
this.addMoon = function (moon) { 


this.moons.unshift (moon); // 使 用 unshift 在 数组 开始 处 添加 元 素 


}; 


Var planet1 = new Planet ("Jupiter", 5, "Gas Giant"),; 
planetl.addMoon ("Io");  // 先 添加 "ITo"， 再 添加 "Europan 
planetl1.addMoon ("Europa"); 


Var planet2 = new Planet ("Neptune", 8, "Ice Giant"),; 
planet2.addMoon ("Triton"); 


Var planet3 = new Planet ("Mercury", 1, "Terrestrial").,; 
[planet1, planet2, planet3] .forEach (function (planet){ // 使 用 方 括号 创建 
// 一 个 数组 ， 并 立即 用 forEach 遍历 该 数组 


planet .ShowP1anet () ; 


> 


在 以 上 planetl 的 代码 中 ， 首 先 添 加 了 Io， 然 后 添加 了 Europa， 但 在 输出 中 顺序 恰恰 相 
反 。 这 是 因为 我 们 使 用 的 unshift 是 在 moons 数组 的 开头 添加 元 素 ， 而 不 是 在 末尾 添加 元 素 。 


9.2.3 ”使 用 instanceof 运算 符 区 分 对 象 


我 们 使 用 多 个 不 同 的 构造 函数 创建 了 许多 不 同 的 对 象 ， 在 程序 中 要 处 理 这 些 对 象 时 ， 有 
时 需要 将 一 种 对 象 类 型 与 其 他 种 类 的 对 象 类 型 区 分 开 来 ， 例 如 iteml 是 一 个 行星 对 象 ， 一 个 
玩家 对 象 ， 还 是 一 个 位 置 对 象 ? JavaScript 语言 中 的 instanceof 运算 符 能 够 帮助 解决 上 述 问 
题 ， 我 们 可 以 用 它 来 核实 一 个 对 象 是 否 由 某 个 特定 的 构造 函数 所 创建 。 假 设 我 们 已 经 定义 了 
Planet 构造 函数 ，iteml 确实 是 由 了 Planet 构造 函数 所 创建 的 ， 因 此 运行 以 下 代码 片段 ， 控 制 台 
将 会 显示 true。 


U 


一 


Var iteml = new Planet ("Jupiter'", 5, "Gas Giant"),; 


console.log(iteml instanceof Planet); 


instanceof 运算 符 的 返回 值 为 true 或 false。 我 们 将 true 和 false 称 为 布尔 值 。 事 实 上 ， 布 
尔 值 也 仅 有 true 和 false。 在 本 书 的 第 二 部 分 和 第 三 部 分 ， 读 者 会 看 到 更 多 的 true 和 false， 
它们 是 决定 代码 运行 方向 的 中 枢 ， 代 码 前 进 的 方向 取决 于 某 些 条件 是 否 被 满足 。 

为 了 更 好 地 理解 构造 函数 ， 下 面 我 们 再 来 看 几 个 例子 。 在 下 一 节 ， 我 们 使 用 构造 函数 来 
蛙 测 验 中 的 问题 和 日 历 中 的 事件 。 


Ne 


处 


9.3 ”建造 大 师 一 一 两 个 构造 函数 的 示例 


一 个 测验 中 可 能 包括 几 十 个 问题 ， 一 个 日 历 中 可 能 包括 成 千 上 万 的 事件 ， 而 这 些 数量 众 
多 的 问题 和 事件 却 有 可 能 在 结构 上 类 似 。 因 此 针对 这 两 种 类 型 的 对 象 貌 似 最 适合 采用 构造 函 
数 来 创建 。 

在 以 下 代码 清单 9-7 中 ， 使 用 QuizQuestion 构造 函数 创建 了 一 个 问题 并 将 其 显示 在 控制 
公 [三 。 


口 i : 
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> What is the capital of France? 
(1) Bordeaux 


V 


> (2) F 
> (3) Paris 
> (4) Brussels 


< “代码 清单 9-7 ”一 个 测验 问题 的 构造 函数 
I (http://jsbin.com/vuyesi/edit?js,console) 


var QuizQuestion = function (question, answer) { 
this.question = question; 
this.answer = answer; 
this.options = []; 
this.addOoption = function (option) { 
this.options.push (option); 


和 
this.showQuestion = function (){ 
console.log(this.question); 
this.options.forEach (function (option, 1i){ // 增 加 第 二 个 形 参 来 获取 
// 索 引 实 参 
console.log("(" + (i+ 1) + ") " + option); /x* 使 用 花 括号 将 索 
*x 引 值 加 1， 并 将 结果 用 在 字符 串 中 
})3 
}; 
}; 
var gquestionl = new QuizQuestion ( 


"What is the capital of France?", 
"Paris'" 
); 
questionl1.addOoption ("Bordeaux"); 
questionl1.addOoption ("F"),; 
questionl.addOoption("Paris"),; 
questionl.addOoption('"Brussels'"); 


132 duestionl .showQuestion() ; 


在 以 上 代码 清单 9-7 中 ，showQuestion 函数 使 用 forEach 方法 来 遍历 备 选 答案 options 数 
组 。forEach 方法 将 每 个 选项 及 其 索引 值 传递 到 显示 选项 及 其 编号 的 函数 : 


function (option, i) { 


console.log("(" + (i + 1) + ") "+ option); 


} 


第 一 个 选项 的 索引 值 为 0，， 但 是 我 们 希望 显示 的 数字 从 (1) 开始， 因此 使 用 (i + 1)， 
而 不 是 i。 将 每 个 索引 值 加 1， 再 进行 显示 ， 如 下 所 示 : 


> (1) Bordeaux 
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> (3) Paris 


> (4) Brussels 


以 下 代码 清单 9-8 是 一 个 用 于 创建 日 历 中 事件 的 构造 函数 。showEvent 方法 生成 以 下 


输出 


> Annual Review 
> 3/5/16, from 4.00pm to 5.00pm 


代码 清单 9-8 ”一 个 用 于 创建 日 历 中 事件 的 构造 函数 
(http://jsbin.com/gemiyu/edit?js,console) 


var CalendarEvent = function (title, startDate, startTime, endTime) { 
this.title = title; 
this.startDate = startDate; 
this.startTime = startTime; 
this.endTime = endTime; 
this.showEvent = function(){ // 定 义 一 个 方法 来 显示 当前 日 历 中 事件 的 相关 信息 
var datestring = [ // 将 该 日 期 字符 串 的 片段 构建 为 数组 中 的 各 元 素 
this.startDate, 


so 

this.startTime, 

中 老 售 1 中 

this.endTime 
] .join("") ; // 连 接 数 组 元 素 以 形成 该 日 期 完整 的 字符 串 
console.log(this.title); 


console.log(dateString); 
和 
反 
var calEvent = new CalendqarEvent ( 
"Annual Review", 
"3/5/16", 
"4.00pm", 
"5.00pm" 
); 
calEvent .showEvent () ; 


在 以 上 showEvent 方法 中 ， 我 们 不 仅 创 建 了 一 个 数组 ， 而 且 立 即使 用 join 方法 形成 了 一 
个 日 期 信息 的 字符 串 。 在 第 8 章 中 ， 我 们 介绍 过 join 方法 ， 它 是 一 种 将 多 个 部 分 连接 在 一 起 
生成 一 个 完整 字符 串 的 简便 方法 。JavaScript 程序 员 过 去 常常 使 用 +=， 一 步 步 地 将 各 个 子 字 
符 串 连接 起 来 ， 构 建成 为 一 个 完整 的 字符 串 ， 这 种 方法 显然 费时 费力 。 现 在 ， 我 们 一 般 不 再 
使 用 +=， 而 是 使 用 轻松 快捷 的 join 方法 来 连接 数组 元 素 构建 字符 串 。 下 面 ， 我 们 分 别 采用 以 
上 两 种 方法 构建 dateString 字符 串 ， 二 者 的 输出 结果 相同 。 

(1) 使 用 join 方法 


十 


Var dateString = [ 
this.startDate., 
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", from ", 
this.startTime, 
1 te 中 号 
this.endTime 


] .join(nv) ; 


(2) 使 用 + = 运算 符 
vardateString = this.startDate; 
datestring += ", from "; 
dateSstring += this.startTime; 
dateString += " to "; 
dateString += this.endTime; 


其 实 ， 现 代 版 本 的 浏览 器 已 经 很 先进 了 ， 字 


符 串 连接 的 速度 也 比 以 前 快 了 许多 。 本 书 在 


这 里 介绍 join 方法 ， 以 备 读者 将 来 有 可 能 会 在 其 


他 荒 蛮 之 地 遇 到 它 。 


在 本 章 中 ， 我 们 掌握 了 构造 函数 ， 它 提供 了 一 种 标准 化 的 流水 线 方法 ， 在 这 条 流水 线 
上 ， 我 们 使 用 一 个 模板 就 可 以 创建 许多 对 象 。 每 一 次 伟大 的 冒险 必然 会 经 过 许 许多 多 的 地 
方 ， 让 我 们 再 次 探险 ， 进 入 The Crypt， 使 用 构造 函数 为 玩家 提供 足够 多 的 掠夺 地 ! 


9.4 The Crypt 一 一 为 玩家 提供 掠夺 地 


在 本 节 中 ， 我 们 将 构造 函数 的 知识 应 用 到 The Crypt 游戏 中 去 。 图 9-3 显示 通过 使 用 构 


造 函 数 来 创建 Place 对 象 。 


Players Places Maps 
player variables place objects linking pla ia exit 
a player object place items Game 
showing player info place exits render 
player items showing place info get 
Player Constructor Place Constructor go 
图 9-3 ”TheCrypt 中 的 游戏 元 素 
i RE 2 Dy 二 一 中 7 (二 让 Ws < 从 
在 本 书 的 前 面 章节 中 ， 我 们 一 直 专 注 于 游戏 中 的 玩家 信息 ， 现 在 开始 关注 探索 地 点 。 每 


个 地 点 都 包含 以 下 信息 : 该 地 点 的 名 称 标题 和 描述 、 在 该 地 点 所 拥有 物品 的 集合 、 以 及 以 该 


地 点 作为 出 口 可 以 通 往 其 他 地 点 的 集合 。 
示 信 息 。 图 9-4 是 在 控制 台 上 Place 对 象 所 显示 


管 


忆 


我 们 还 需要 一 些 方法 来 添加 上 述 物品 和 出 口 ， 并 显 
的 各 个 元 素 。 
所 有 这 些 元 素 需要 相当 多 的 代码 。 我 们 刚刚 学 习 的 构造 函数 正 是 组 织 这 些 代 码 并 简 


化 多 个 Place 对 象 创建 的 好 方法 。 这 将 是 读者 目 
步 一 步 来 ， 分 阶段 地 构建 


o 
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前 遇 到 的 最 复杂 的 构造 函数 ， 所 以 让 我 们 一 


第 9 章 构造 函数 : 构建 带 有 函数 的 对 象 

名 称 周围 的 方 框 

= The Old Library = 名 称 标题 

描述 You are in a library. Dusty books line the walls. 

Items: 
- a rusty key 物品 列表 

Exits from The Old Library: 
- The Kitchen 出 口 列表 


- The Main Hall 


图 9-4 在 控制 台 上 Place 对 象 的 各 元 素 


9.4.1 构建 Place 构造 本 数 一 一 名 称 标题 和 描述 


我 们 首先 从 一 个 基本 的 构造 函数 入 手 ， 用 于 设置 tile 和 description 属性 ， 初 始 输出 如 下 


所 示 : 


> The Old Library 


> You are in a library. Dusty books line the walls. 


3 “代码 清单 9-9 Place 构造 函数 ， 第 一 部 分 
DS ee pe 
(http://isbin.com/pogive/edit?js,console) 


6 


Var Place = function(title, description 


this.title = title; 
this.description = description; // 为 


this.getInfo = function(){ // 通 


var infoString = this.title + "\n'"; 


infoString += this.description + "\n"; 


return infoString; 


自动 创建 的 this 对 象 的 属性 赋值 
过 将 函数 赋值 给 属性 来 创建 方法 


} 
1 
var library = new Placel( // 用 关键 字 new 调用 构造 函数 
"The Old Library", 
"You are in a library. Dusty books line the walls." 
); 
console.log(library.getInfo()); // 调 用 getInfo 方法 将 返回 值 显示 在 控 促 


以 上 显示 内 容 只 是 最 基本 的 信息 ， 并 没有 方 框 和 边 术 


返回 一 个 包含 地 点 的 名 称 标 题 和 描述 的 字符 串 。 请 注意 ,，“\n” 是 换 


行 ， 而 描述 在 下 一 行 。 


臣 。 我 们 定义 了 一 个 getInfo 方法 ， 


{ // 将 构造 函数 赋值 给 以 大 写字 母 
// 开 头 的 变量 


I 台 上 


行 符 ， 名 称 标题 在 一 


119 


135 


JavaScript 开发 实战 


现在 我 们 已 经 可 以 创建 地 点 了 。 玩 家 如 何 掠夺 这 些 地 点 ?我们 还 需要 一 些 宝藏 ! 


9.4.2 ”构建 Place 构造 函数 一 一 转 积 物品 


当 玩 家 探索 四 周 环 境 时 ， 他 们 期 望 拾得 一 些 宝物 ， 拥 有 这 些 物品 他 们 才能 披荆斩棘 、 战 
无 不 胜 。 因 此 ， 我 们 需要 一 种 将 物品 添加 到 已 经 创建 好 的 地 点 的 方法 ， 并 在 显示 每 个 地 点 信 
县 时 显示 这 些 物品 。 

以 下 代码 清单 9-10 是 对 基本 构造 函数 9-9 的 扩展 ， 包 含 了 物品 信息 ， 而 且 还 使 用 第 7 
章 中 的 spacer 命名 空间 对 显示 外 观 进行 了 升级 ， 如 下 所 示 : 


You are in a library. Dusty books line the walls. 
Items: 
- a rusty key 


这 看 上 去 与 图 9-4 的 目标 输出 比较 接近 ! 在 以 下 代码 清单 中 并 没有 显示 spacer 代码 ， 但 
是 在 JS Bin 上 有 所 显示 。 


代码 清单 9-10 ”Place 构造 函数 ， 第 二 部 分 
(http://jsbin.com/qemica/edit?js,console) 


var Place = function (title, description) { 
thigs,.title = titles 


this.description = description,; 


this.items = []; / /创建 一 个 空 数组 并 将 其 赋值 给 items 属性 
this.getItems = function () { // 定 义 一 个 getItems 方法 来 构建 物品 字符 串 
Var itemsSstring = "Items: " + spacer.newLine(); 


this.items.forBach (function (item) { 
itemsString += " - " + item; 
itemsString += spacer.newLine(); 
}); 
return itemsString; 
和 
this.getInfo = function () { 
var infoString = spacer.box( 
this.title, 
this.title.length + 4, 
mon 
) ; 
infoString += this.description; 


infoString += spacer.newLine(); 


infoString += this.getItems () ; // 在 构建 关于 地 点 的 info 时 ， 包 括 对 
//getItems 的 调用 
infoString += spacer.line(40, "=") + Spacer.newLine () ; 
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returninfoSstring; 
请 
this.addItem = function (item) { // 定 义 addTtem 方 法 ， 将 新 物品 添加 到 
//items 数组 


this.items.push (item); 

}; 
}; 
var library = new Place 人 

"The Old Library", 

"You are in a library. Dusty books line the walls." 
外 
library.addItem("a rusty key"); // 使 用 addItem 方法 添加 物品 
console.log(library.getIinfo()); 


vane 


使 用 spacer 命名 空间 可 以 添加 换行 符 ， 可 以 在 名 称 标题 周围 设计 一 个 方 框 ， 还 可 以 使 月 
边框 结束 信息 字符 串 。 关 于 spacer 方法 的 具体 用 法 ， 请 参阅 第 7 章 相 关内 容 。 
其 实 我 们 本 来 可 以 将 items 参数 作为 Place 构造 函数 的 一 部 分 ， 但 是 现在 希望 在 游戏 进 
行 中 能 够 向 某 个 场所 添加 物品 ， 因 此 不 把 items 参数 放 入 Place 构造 函数 ， 使 构造 函数 保持 
简单 ， 然 后 再 用 addItem 方法 来 添加 物品 。 


那 条 黑暗 的 通道 将 通 往 何 处 ? 是 龙 的 巢穴 ? 是 星际 的 桥梁 ? 还 是 消失 的 恐龙 谷 ? 
9.4.3 构建 Place 构造 国 数 一 一 探索 出 口 


如 果 玩 家 上 只 能 停留 在 一 个 场所 ， 又 怎 能 算是 冒险 呢 ? 他 们 想 要 漫游 广阔 的 世界 。 下 面 ， 我 
们 就 来 为 Place 构造 函数 添加 最 后 一 项 内 容 : 出 口 信息 ， 即 此 处 可 以 通 往 何 处 。 每 个 场所 包括 


一 个 出 口 数组 ， 以 及 一 个 方法 ， 该 方法 用 于 将 目的 地 添加 到 该 数组 。 出 口 输出 如 下 所 示 : 


You are in a library. Dusty books line the walls. 
Items: 

- a rusty key 

Exits from The Old Library: 

- The Kitchen 

- The Main Hall 


以 下 代码 清单 中 再 次 省 略 了 spacer 代码 。 


EPE 


= 代码 清单 9-11 Place 构造 函数 ， 第 三 部 分 


0 (http://jsbin.com/parale/edit?js,console) 


var Place = function (title, description) { 
var newLine = spacer.newLine();// 将 spacer.newLine() 返回 的 换行 字符 赋 
// 值 给 newLine 变量 


this.title = title; 
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this.description = description; 


this.items = []; 
this.exits = []; / /创建 一 个 空 数组 ， 并 将 其 赋值 给 exits 属 
this.getItems = function(){ /* 见 代 码 清单 9-10 */ }; 
this.getExits = function () { // 定 义 getExits 方法 来 构建 一 个 出 口 信息 字 
// 符 串 
var exitsString = "Exits from " + this.title; 
exitsString += ":" + newLine; 


this.exits.forBach (function (exit) { 
exitsString += " - " + exit.title; 
exitsString += newLine; 
}); 
return exitsString; 
}; 
this.getTitle = function () {  // 将 名 称 标题 的 方 框 代码 移 到 自己 的 方法 代码 中 
return SPacer .box ( 
this.title, 
this.title.length + 4, 


}; 

this.getInfo = function () { 
var infostring = this.getTitle(); // 使 用 新 方法 来 构建 信息 字符 
infostring += this.description; 


Ud 


infoString += newLine + newLine; 


infoString += this.getIitems() + newLine; 
infoString += this.getExits(); 
infoString += spacer.line(40, "=") + newLine; 
return infoSstring; 
上 
this.showInfo = function () { 
console.log(this.getIinfo()).; 
和 
this.addItem = function (item) { 
this.items.push (item); 
}; 
this.addExit = function (exit) { // 定 义 adqExit 方法 ， 将 一 个 新 场所 添 
// 加 到 exits 数组 
this.exits.push (exit); 
} 
上 
var library = new Place 人 
"The Old Library", 
"You are in a library. Dusty books line the walls." 
); 


Var kitchen = new Placel( 
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代码 


首先 


用 它 一 次 ， 并 将 返回 值 分 配给 newLine 变量 ， 以 后 我 们 就 可 以 使 用 newLine 而 不 是 
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The Kitchen", 
"You are in the kitchen. There is a disturbing smell." 
); 
var hall = new Placel( 
"The Main Hall", 
"You are in a large hall. It is strangely empty." 
); 
library.addIitem("a rusty key"); 
library.addExit (kitchen); // 将 1ibrary 作为 与 kitchen 和 nall 相连 的 接合 点 
library.addExit (hall); 
library.showInfo(); 


貌似 很 长 ， 但 是 相当 一 部 分 是 重复 前 面 讲 过 的 内 容 。 其 实 读者 不 必 通 读 全 部 代码 ， 


只 需 每 次 专注 于 一 个 方法 ， 花 些 时 间 读 懂 该 方法 即 可 。 


一 个 新 行 “m”， 所 以 先 调 


加 


， 我 们 尽量 采用 简捷 方式 。spacernewLine 方法 总 是 返 


spacernewLine0， 这 样 不 仅 可 以 节省 一 些 输入 ， 还 不 会 影响 代码 的 可 读 性 。 其 次 ， 我 们 还 可 
以 添加 getExits 和 getTitle 方法 来 构建 场所 信息 字符 串 中 的 相应 部 分 。 还 有 ， 正 如 addItems 
方法 可 以 用 来 添加 物品 ， 我 们 也 可 以 采用 addExits 方法 来 添加 出 口 。 


exits 


属性 包含 一 个 Place 对 象 的 数组 ， 换 句 话 说， 每 个 Place 对 和 象 都 包含 一 个 Place 对 象 


的 集合 。 这 种 在 对 象 中 舱 套 对 象 的 能 力 可 以 为 现实 问题 构造 复杂 模型 。 尽 管 一 个 完整 的 模型 


可 能 会 相当 复杂 ， 但 是 每 个 组 件 应 该 相对 容易 理解 。 游 戏 The Crypt 能 够 让 我 们 充分 享受 这 
种 由 简单 部 件 构建 安 伟 工程 的 过 程 。 让 我 们 重 温 一 下 本 章 学 习 的 内 容 ， 为 玩家 对 象 定 义 一 个 


9.s The Crypt 


信 ， 


简化 玩家 创建 代码 


9-5 显示 通过 使 用 构造 函数 来 创建 Player 对 象 。 


Players Places Maps 
player variables place objects linking places via exits 
a player object place items Game 
showing player info place exits ender 
player items showing place info get 
Player Constructor Place Constructor go 


在 第 


图 9-5 ”游戏 The Crypt 中 的 各 元 素 


8 章 中 ， 我 们 向 玩家 对 象 添加 了 一 个 物品 的 数组 ， 并 定义 了 函数 ， 以 便 在 显示 玩家 


旧时 能 包括 这 些 物 品 。 但 是 我 们 依然 是 采用 手动 方式 创建 各 个 玩家 ， 如 下 所 示 : 
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var playerl1 = { 
name: "Kandra", 
place: "The Dungeon of Doom", 


health: 50, 
items : ["a trusty lamp"] 
和 
我 们 将 各 个 玩家 显示 函数 分 配给 各 个 变量 ， 变 量 的 数量 可 真 不 少 ! 如 下 所 示 : 
var getPlayerName = function (player) { . }; 
var getPplayerHealth = function (player) { .. }; 
var getPlayetrPlace = function (player) { . }; 
var getplayerIitems = function (player) { . }; 
var getPplayerIinfo = function (player, character) { . }; 
var showPlayerIinfo = function (player, character) { .. }; 


以 上 各 个 显示 函数 共同 努力 ， 在 控制 台 上 显示 以 下 信息 ， 如 图 9-6 所 示 。 
为 了 将 物品 添加 给 玩家 ， 直 接 使 用 了 push 将 其 推 入 items 数组 : 


playerl.items.push("a rusty key"); 


玩家 名 字 四 周 的 方 框 
玩家 的 名 字 Ri 
Ee 场所 信息 
玩家 的 健康 值 = Kandra has health 50 = 
TIN 
物品 清单 了 边框 


- The Sword of Doom 


图 9-6 Player 对 象 在 控制 台 上 上 所 显示 的 元 素 


9.5.1 整理 玩家 属性 
下 面 ， 我 们 要 整合 这 些 雄 片 ， 使 用 构造 函数 简化 玩家 的 创建 ， 使 函数 成 为 方法 ， 消 灭 这 
些 数量 庞大 的 变量 。Player 构造 函数 可 以 创建 Player 对 象 ， 如 下 所 示 : 


var playerl1 = new Player ("Kandra", 50); 


构造 函数 还 会 添加 一 个 方法 ， 我 们 可 以 通过 调用 该 方法 来 添加 物品 : 


playerl.addIitem("a rusty key"); 
以 下 代码 清单 9-12 是 Player 构造 函数 的 代码 ， 也 使 用 了 第 7 章 spacer 命名 空间 中 的 方 
法 《本 书 代 码 省 略 了 spacer 代码 ， 但 在 JS Bin 中 有 所 显示 )。 为 了 测试 由 Player 构造 函数 所 
创建 的 Player 对 象 ， 该 代码 清单 还 使 用 了 9.4 节 中 的 Place 构造 函数 〈 在 本 书 中 还 是 省 略 
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了 ， 但 在 JS Bin 中 有 显示 )。 该 代码 清和 


会 有 解释 


这 段 代 码 很 长 〈 在 JS Bin 上 更 长 )， 但 不 要 担心 ， 我 们 已 经 看 过 类 似 的 代码 。 请 读者 重 
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Tt 


中 出 现 了 一 种 新 的 值 类 型 : null， 在 代码 清单 的 后 面 


| 


上 田 


点 查看 代码 注释 ， 阅 读 代码 清单 里 面 的 解释 ， 并 尝试 在 JS Bin 上 运行 代码 。 建 议 读者 能 快速 
复习 一 下 第 8 章 中 的 The Crypt 部 分 ， 这 部 分 内 容 是 以 下 代码 的 重要 基础 。 


“代码 清单 9-12 ”Player 构造 函数 
MW (http://jsbin.com/leqahi/edit?js,console) 


var Player = function (name, health) { 


Var newLine = spacer.newLine(); 

this.name = name; 

this.health = health; 

this.items = []; 

this.place = null;  // 在 创建 一 个 场所 并 赋值 给 place 属性 之 前 ， 先 将 空 值 nul1 
// 分 配给 place 属性 

this.addItem = function (item) { // 定 义 一 个 方法 来 为 物品 数组 添加 元 素 


this.items.push (item); 


| 


} 
this.getName = function(){ // 从 get 函数 返回 玩家 信息 的 字符 串 
return this.name 


} 
this.getHealth = function(){ 
return this.name + " has health " + this.health; 
}; 
this.getPlace = function(){ 
return this.name + " is in " +this.place.title;  // 使 用 已 分 配给 
//this.place 的 
// 对 象 的 title 属性 


this.getItems = function(){ 
Var itemsSstring = "Items:" + newLine; 
this.items.forEach (function (item, i){ 
itemsString += " - " + item + newLine,; 
}) ; 
return itemsString; 
}; 
this.getIinfo = function (character){ 
Var place = this.getPlace(); 
Var health = this.getHealth(); 
Var longest = Math.max(place.length, health.length) + 4; 
Var info = spacer.box(this.getName(), longest, character),; 
/* 使 用 spacer 方法 对 玩家 信 
* 居 进行 格式 处 理 
*y 


info += spacer.wrap (place, longest, character); 
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info += newLine + spacer.wrap (health, longest, character); 
info += newLine + spacer.line(longest, character); 

info += newLine; 

info += " " + this.getIitems(); 

info += newLine; 

info += spacer.line(longest, character),; 

info += newLine; 


return info; 


> 


this.showInfo = 


function(character){ // 定 义 - 


Ud 


-个 方法 来 获取 玩家 信息 字符 
显示 在 控制 台 上 


// 将 其 


console.log(this.getIinfo(character)); 


入 
} 
/ /测试 Player 构造 函数 
Var library = new Place 


"The Old Library", 


/ /创建 一 个 Place 对 象 


"You are in a library. Dusty books line the walls." 


) 


Var playerl = new Player ("Kandra"，50); // 创 建 一 个 Player 对 象 
playerl.place = library; // 将 Place 对 象 分 配给 player 
playerl.addIitem("a rusty key"); 
playerl.addIitem('"The Sword of Doom'" ) ; 
playerl1l.showInfo("="),; 

这 个 代码 清单 实在 是 太 长 了 ! 下 面 ， 我 们 把 它 拆 分 开 来 ， 仔 细 研 究 。 


9.5.2 ”将 函数 转换 为 方法 
在 第 7 章 和 第 8 章 中 ， 我 们 定义 了 一 些 函 数 来 构建 并 显示 玩家 信息 字符 串 ， 例 如 : 
var getPlayerHealth = function (player) { 
return player.name + " has health " + player.health,; 


和 
我 们 将 Player 对 象 作为 实 参 传递 给 函数 : 
9etP1ayerHealth (PLayezI) ; 


然后 ， 该 函数 使 用 Player 对 象 的 属性 来 构建 
现在 已 将 这 些 函 数 移动 到 Player 构造 函数 
属性 : 


this.getHealth = function () { 


return this.name + 


jy 


当 我 们 将 函数 指定 为 对 象 的 属性 时 ， 称 之 为 方法 。 可 以 使 用 圆 
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音 息 字符 串 。 
中 ， 并 将 这 些 函 数 分 配给 特殊 对 象 this 的 


"has health " + this.health; 


圆 点 运算 符 和 圆 括号 来 调用 


方法 : 
playerl.getHealth () ; 


我 们 不 再 需要 将 Player 对 象 作 为 参数 传递 给 函数 。 几 是 在 函数 体 中 使 用 “this” 的 地 
方 ，playerl 将 代替 它 ， 如 下 所 示 : 


return this.name + " has health "+ this.health; 
变 成 : 
return playerl.name +" has health "+ playerl.health; 
以 上 将 所 有 函数 转换 为 Player 对 象 的 方法 不 再 需要 为 每 个 函数 使 用 单独 的 变量 ， 这 样 做 
还 能 够 使 函数 定义 与 其 操作 的 对 象 放 在 一 起 ， 干 净利 落 ! 
9.5.3 ”为 玩家 分 配 位 置 
我 们 需要 知道 玩家 在 游戏 中 的 具体 位 置 在 哪里 。 在 前 面 的 章节 中 ， 为 每 个 玩家 的 place 
属性 分 配 了 一 个 字符 串 : 


playerl.place ="The Old Library"; 
每 一 个 位 置 所 包含 的 内 容 不 只 是 这 个 位 置 的 名 称 。 使 用 Place 构造 函数 创建 的 Place 对 
象 包 含 名 称 、 描 述 、 物 品 数组 、 出 口 和 方法 。 从 现在 开始 ， 要 把 完整 的 Place 对 象 分 配给 
玩家 : 


var library = new Place( 

"The Old Library", 

"You are in a library. Dusty books line the walls." 
); 
Var playerl1 = new Player ("Kandra", 50); 


playerl.place = library; 


随 着 玩家 探索 周围 的 环境 ， 可 以 为 每 个 新 位 置 分 配 一 个 已 经 构建 好 的 Place 对 象 ， 来 更 
新 place 属性 。 
现在 ， 我 们 已 将 完整 的 Place 对 象 分 配给 玩家 的 place 属性， 还 需要 用 getPlace 方法 做 一 
些 额外 的 工作 来 构建 其 信息 字符 串 ; 


this.getPlace = function () { 


return this.name +"“is in’”+ this.place.title; 


3 
以 前 ，this.place 存放 玩家 当前 位 置 的 名 称 ， 现 在 存放 一 个 Place 对 象 。 我 们 可 以 通过 
this.place.title 来 访问 地 点 的 名 称 。 
9.5.4 ”使 用 null 作为 对 象 的 占 位 符 
请 注意 ， 在 代码 清单 9-12 中 ， 我 们 将 特殊 值 null 分 配给 构造 函数 中 的 place 属性 。 这 表 
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明 我 们 打算 在 程序 中 使 用 place 属性 ， 但 目前 该 属性 还 没有 一 个 确定 的 值 ， 只 有 在 创建 好 一 
些 位 置 后 ， 才 能 将 其 分 配给 玩家 的 place 属性 。 
player.place = null; // 我 们 期 望 将 来 会 有 一 个 对 象 来 此 赋值 
/ * 其 他 代码 * / 
player.place = 1ibrary; // 果 然 有 一 个 对 象 来 赋值 
定义 null 是 一 个 独特 的 值 类 型 ， 它 既 不 是 字符 串 、 数 字 、 布 尔 值 (true 或 false) 或 
undefined， 也 不 是 一 个 对 象 。 程 序 员 经 常 使 用 null， 表 明 目 前 还 没有 分 配 一 个 对 象 到 某 变 量 
或 属性 ， 但 希望 在 以 后 会 分 配 一 个 对 象 到 该 变量 或 属性 。 
现在 我 们 已 经 学 会 采用 高 效 的 方法 来 创建 许多 对 象 ， 可 以 使 用 构造 函数 来 构建 The 
Crypt 中 的 所 有 地 点 。 我 们 可 以 在 各 个 地 点 添加 物品 ， 可 以 将 各 个 地 点 连接 在 一 起 绘制 地 
图 ， 还 可 以 将 地 点 分 配给 玩家 。 目 前 ， 我 们 迫切 需要 找到 一 种 方式 ， 能 够 让 玩 家 从 一 个 地 方 
移动 到 另 一 个 地 方 。 这 样 就 真正 创建 了 一 个 可 以 自由 探索 的 游戏 环境 ! 


9.6 本章 小 结 
国 使 用 构造 函数 来 创建 具有 类 似 结构 的 对 象 。 
国 将 构造 函数 分 配给 以 大 写字 母 开头 的 变量 。 以 这 种 方式 来 命名 构造 函数 是 一 个 广泛 
遵循 的 惯例 : 


Wl 


var Person = function (name) {...}; 


图 使 用 new 关键 字 调用 构造 函数 。 将 返回 的 对 象 分 配给 一 个 变量 ; 


var person = new Person ("Jahver'") ; 


使 用 特殊 的 this 变量 在 构造 函数 内 设置 属性 。this 从 构造 函数 自动 返回 : 


var Person = function (name) { 
this.name = name; 


上 


var person = new Person ("Jahver'") ; 


图 像 其 他 任何 对 象 一 样 ， 访 问 返 回 对 象 的 属性 : 


person.name; // Jahver 


图 将 函数 分 配给 属性 来 创建 方法 ， 使 用 圆 点 运算 符 和 圆 括号 调用 方法 : 


var Person = function (name) { 
this.name = name; 
this.sayHello = function () { 
return this.name +'"said hi."; 
}; 
}; 


var person = new Person ("Jahver").,，; 
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person.sayHello () ; // Jahver says hi. 
加 如 果 希 望 未 来 分 配对 象 给 某 一 个 变量 或 属性 ， 但 该 对 象 目前 还 不 可 用 ， 请 先 为 该 变 
量 或 属性 指定 值 null: 


四 


playerl .place all; 


/ * 其 他 代码 * / 

playerl.place = library; 
图 使 用 instanceof 运算 符 来 检查 某 个 对 象 是 否 由 某 个 构造 函数 所 创建 。 该 运算 符 返回 一 
个 布尔 值 ，true 或 false: 


Var person = new Person (nrJahver") ，; 
146 


person instanceof Person; // true 


person instanceof Planet,; // false 


129 


147 


第 10 草 


性 。 


本 章 内 容 包括 : 
图 方 括号 运算 符 替代 圆 点 运算 符 
图 使 用 方 括号 运算 符 设置 和 获取 属性 


图 方 括号 运算 符 的 灵活 性 
图 如 何在 The Crypt 中 创建 一 个 工作 版 游戏 


在 第 3 章 中 ， 我 们 学 习 了 如 何 使 用 花 括号 创建 对 象 ， 并 使 有 
我 们 学 会 使 用 对 象 来 创建 玩家 、 地 点 、 行 星 、 
通过 添加 函数 作为 属性 来 创建 方法 ， 并 将 对 和 象 作为 参数 和 返回 
整个 JavaScript 世界 的 核心 ! 
在 本 章 中 ， 读 者 将 了 解 使 用 对 和 象 属性 的 一 种 新 方法 ， 它 能 够 计 


方 括号 运算 答 : 灵活 的 属性 


名 称 


日 罗 点 运算 符 获 取 和 设置 属 


博客 帖子 ， 以 及 测验 和 日 程 事件 ， 还 能 够 


称 ， 使 用 变量 作为 键 ， 并 拥有 在 程序 运行 中 根据 数据 生成 新 属性 的 能 力 。 


作为 本 书 第 一 部 分 的 谢幕 作品 ， 本 章 将 完成 The Crypt 的 工作 
索 地 图 


值 传递 给 函数 。 对 象 简直 就 是 


我们 更 灵活 地 使 用 属性 名 


版 本 ， 最 终 给 玩家 提供 探 


位 置 之 间 的 链接 ， 创 建 与 网 络 链接 的 Place 对 象 ， 为 冒险 活动 增加 神秘 感 。 


10.1 用 方 括号 运算 符 蔡 代 圆 点 运算 符 


之 外 ，JavaScript 还 提供 了 另外 一 种 访问 属性 的 方法 : 通过 将 属性 的 键 作为 字符 上 


括号 


性 。 


在 前 儿 章 中 ， 我 们 已 经 学 会 使 用 圆 点 运算 符 设 置 和 获取 对 象 属性 。 


cuestionl.dquestion = "What is the capital of France?"; 


console.log (playerl1 .name); 
Elite titLe.s CitLey 


之 间 来 设置 和 获取 属性 ， 如 下 所 示 : 


属性 名 称 ( 键 通过 辆 点 符号 与 变量 名 连接 如 


和 收集 宝贝 的 机 会 ! 方 括号 运算 符 在 游戏 改进 过 程 中 发 挥 了 以 下 作用 : 管理 游戏 中 各 


E 一 起 ， 这 样 就 可 以 访问 变量 的 属性 。 除 此 


duestionl ["question'"] = "What is the capital of France?",; 


console.log(playerl ["name"] ) ， 
this["title"] = title; 


包含 在 方 


这 种 新 方法 为 我 们 把 字符 串 作 为 键 以 及 在 程序 运行 时 添加 动态 属性 提供 了 更 大 的 灵活 


例如 ， 我 们 要 设置 一 个 states 对 象 ， 把 美国 州 名 缩写 作为 值 ， 把 各 州 的 全 名 作为 键 ， 我 


们 完 


全 可 以 使 用 圆 点 运算 符 来 获取 Ohio 《俄亥俄 州 ) 的 缩写 ， 如 下 所 示 : 


第 10 章 方 括号 运算 符 : 灵活 的 属性 名 称 
console.log(states.ohio); // OH 


但 是 ， 因 为 某 些 州 名 中 有 个 讨厌 的 空格 ， 例 如 New Hampshire， 就 无 法 再 使 用 圆 点 运算 
符 来 输出 ， 如 下 所 示 : 


console.log(states.new hampshire); // 错误 ! 


使 用 方 插 号 运算 符 可 以 解决 上 述 问 题 (图 10-1): 


console.log(states['"new hampshire"]); // NH 


将 键 放 在 双 引 号 中 


states [ "new hampshire" ] = "NH"; 


使 用 方 括 号 来 确定 一 个 属性 
图 10-1 使 用 方 括号 运算 符 设置 属性 


假设 我 们 有 一 个 使 用 states 对 象 的 getStateCode 函数 ， 方 括号 运算 符 可 以 使 用 函数 的 参 
数 作为 键 : 


Var getStateCode = function (stateName) { 
Var stateCode = States [stateName] : 


return stateCode; 
}; 
如 果 使 用 一 个 函数 参数 作为 键 ， 就 不 能 使 用 圆 点 运算 符 。 表 10-1 列 出 了 需要 使 用 方 括 
号 运算 符 的 多 种 情况 。 


表 10-1 各 种 键 的 执行 情况 


键 的 情况 语句 尝试 执行 结果 

在 对 象 字 面 量 中 使 用 ohio 作为 键 states = { ohio : "OH" }; 成 功 
在 对 象 字面 量 中 使 用 new hampshire 作为 键 states = { new hampshire : "NH" }; 失败 
在 对 象 字面 量 中 使 用 "mew hampshire" 作 为 键 states = { "new hampshire" : "NH" }; 成 功 

到 点 运算 符 访问 键 maryland states.maryland = "MD"; 成 功 
用 圆 点 运算 符 访 问 键 southcarolina states.south carolina = "SC"; 失败 
用 方 括号 运算 符 访问 键 south carolina states["south carolina"] = "SC"; 成 功 
函数 参数 作为 键 ， 到 点 运算 符 访 问 function (stateName) { return states.stateName; } 失败 
尊 数 参数 作为 键 ， 用 方 括号 运算 符 访 问 function (stateName) { return states[stateName]; } 成 功 


以 下 几 个 示例 将 有 助 于 读者 理解 上 述 概念 。 


10.1.1 使 用 方 括号 一 一 人 的 姓名 作为 键 
假设 我 们 需要 保存 一 个 简单 的 年 龄 记录 ， 可 以 使 用 ages 对 象 ， 每 个 人 的 姓名 是 键 ， 其 
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年 龄 是 相应 的 值 。 代 码 清单 10-1,10-2 和 10-3 采用 以 上 方法 ， 在 控制 台 上 输出 两 人 的 年 龄 : 


> 56 
汉 之 玫 


在 以 下 第 一 个 代码 清单 中 ， 使 用 方 括号 运算 符 设置 属性 ， 并 使 
代码 清单 10-1 方 括号 运算 符 用 于 对 象 的 属性 


用 圆 点 运算 符 访问 属性 。 


My (http:/jsbin.com/kipedu/edit?js,console) 
var ages = {}; 
ages["Kandra"] = 56; // 用 名 字 作 为 键 ， 用 方 括号 运算 符 设置 属性 
ages ["Dax'"] = 21; 


// 用 名 字 作 为 键 ， 用 


conSsole.1og(ages .Kandqra) ， 


1 


点 运算 符 获 得 属性 


conSsole.1og(ages .DaX) ; 


这 两 种 方法 对 于 代码 清单 10-1 中 使 用 的 键 是 等 效 的 。 
格 ， 则 必须 使 用 方 括号 。 下 面 的 代码 清单 是 


且 是 ， 


十 
代码 清单 10-2 ”更 长 的 字符 囊 作为 键 
Dy (http:/jsbin.com/toviya/edit2jsconsole) 
var ages = {}; 
ages["Kandra Smith"] = 56; 


ages['"Dax Aniaku"] = 21; 
console.log(ages['"Kandra Smith"]); 


console.1og(ages ["Dax Aniaku"] ); 


使 用 圆 点 运算 符 访问 带 有 空格 的 属性 名 称 就 会 给 JavaScript 


如 果 在 属性 名 称 中 包含 空 


个 类 似 的 示例 ， 但 姓名 部 分 使 用 了 全 名 。 


带 来 混乱 。JavaScript 将 


agesKandra Smith 解释 为 agesKandra， 而 Smith 会 被 看 作 一 个 单独 的 变量 名 称 ， 如 图 10-2 


所 示 。 


JavaScript 将 查找 Smith 变 量 或 关键 字 


ages.Kandra Smith = 56; 


JavaScript 将 尝试 找到 Kandra 属 性 


加 


图 10-2 


方 括号 运算 符 可 以 解决 上 述 问 题 ， 能 够 更 灵活 地 使 用 属性 的 名 


不 知道 要 添加 属性 的 键 的 信息 时 ， 方 括号 允许 在 代码 运行 中 添加 属性 ， 这 些 属性 可 能 来 自 
户 的 输入 或 者 程序 从 文件 或 数据 库 中 获取 的 信息 。 例 如 ， 在 下 一 个 代码 清单 中 ， 读 者 将 看 到 


点 运算 符 不 适用 于 属性 名 称 中 带 有 空格 的 情 


称 。 尤 其 是 当 程 序 员 事先 


一 个 addAge 函数 ， 用 于 向 age 对 象 添加 新 的 人 员 信 息 。 运 行 此 程 
上 使 用 该 函数 添加 新 人 。 
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代码 清 单 10-3 使 用 函 数 添加 年 龄 
(http://jsbin.com/pipuva/edit?js,console) 


型 


var ages = {}; 
var addAge = function (name, age) { // 包 含 一 个 name 形 参 ， 以 后 可 以 将 一 个 
// 名 称 作 为 实 参 传递 给 该 函数 
ages [name] = age; 
和 
adqAge ("Kandra Smith", 56); // 将 传递 给 函数 的 名 称 作为 键 


addAge ("Dax Aniaku", 21); 
console.log(ages['"Kandra Smith"]); 
console.log(ages['"Dax Aniaku"] ); 


在 代码 清单 10-3 中 ， 使 用 addAge 函数 中 的 name 参数 作为 ages 对 象 的 键 。 当 调 用 
addAge 时 ， 第 一 个 实 参 将 分 配给 形 参 name。 如 下 所 示 : 


addAge ("Kandra Smith", 56); 


对 于 函数 调用 中 的 两 个 实 参 ，"Kandra Smith" 分 配给 name，56 分 配给 age， 因 此 


ages [name] = age; 
ages['"Kandra Smith"] = 56 


这 种 在 方 括号 内 使 用 变量 来 设置 属性 的 能 力 使 我 们 能 够 在 程序 中 动态 创建 和 改变 对 象 ， 
更 进一步 使 用 10.1.2 和 10.2 节 中 的 技巧 。 

如 果 要 创建 具有 已 存在 属性 的 对 象 ， 请 使 用 方 括号 ， 并 用 逗号 分 隅 键 - 值 对 。 如 果 使 用 
号 将 键 引 起 来 ， 键 中 可 以 包含 空格 。 下 一 个 代码 清单 采用 了 以 上 做 法 ， 还 介绍 了 
Objectkeys 方法 ， 该 方法 返回 一 个 包含 对 象 中 所 有 键 的 数组 。 该 代码 清单 中 ， 把 keys 数组 
输出 到 控制 台 ， 如 下 所 示 : 


Dy 


> ["Kandra Smith", "Dax Aniaku", "Blinky"] 


代码 清单 10-4 ”使 用 Object.keys 
(http://jsbin.com/mehuno/edit?js,console) 


a 


var ages = { // Blinky 不 需要 使 用 引号 ， 其 他 两 个 需要 使 用 引号 才能 保证 键 中 的 空格 有 效 
"Kandra Smith" : 56, 
"Dax Aniaku" : 21, 
"Blinky" : 36 
} 
var keys = Object.keys (ages); 使 用 Object .keys 获取 设置 在 ages 对 象 属性 上 的 名 称 数组 
console.log (keys); 


Object 是 一 个 内 置 的 JavaScript 对 象 ， 它 提供 了 许多 方法 ， 其 中 之 一 称 为 keys。 因 为 
Object.keys 返回 一 个 数组 ， 所 以 可 以 使 用 forEach 将 每 个 键 传 递 给 一 个 函数 。 代 码 清单 10-5 
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中 将 每 个 键 依 次 传递 给 console.log 函数 ， 并 将 键 输出 到 控 秆 


关于 使 用 方 括号 运算 符 包 含 复杂 的 属性 名 称 ， 
10.1.2 最 大 限度 地 利用 方 括 号 运算 符 一 一 单词 统计 
作为 单位 的 社交 媒体 专家 ， 你 的 任 


>Kandra Smith 
>Dax Aniaku 
>Blinky 


代码 清单 10-5 ”使 用 forEach 在 Object.keys 上 进行 


(http://jsbin.com/seteco/edit?js,console) 


var ages = { // 获 取 与 ages 对 象 属性 上 的 名 称 数组 
"Kandra Smith" : 56, 
"Dax Aniaku" : 21, 
"Blinky" : 36 

全 

var keys = Object.keys (ages) ; 


上 | 台 ， 如 下 所 示 : 


遍历 


keys .forEach (function (key) {// 将 每 个 属性 上 的 名 称 输出 到 控制 台 上 


console.log (key); 


})); 


E 务 是 分 析 推 特 。 


要 任务 就 是 


请 读者 再 看 一 个 示例 。 


统计 一 批 


EE 文中 


每 个 单 


词 的 使 用 次 数 。 图 10-3 显示 了 一 个 推 特 分 析 程 序 在 控制 台 上 输出 的 部 分 内 容 ， 程 序 在 代码 


推 文 。 
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清单 10-6 中 显示 ， 程 


#ESERO: 1， 59 5 
#pet: 1， isma: 1】， 
#STEMeducation: 1， it: 3， 

Et 3 ts 1 

es ds just: 1, 

a: 3， learn: 1， 
A: 1， LIVE: 1， 
about: 1， look: 1， 
across: 1， loyalty: 1， 
age: 1， MsIS: 1， 

图 10-3 统计 推 文中 的 单词 


代码 清单 10-6 ”统计 推 文中 的 单词 使 用 
(http://jsbin.com/figati/edit?js,console) 


多数 


var tweets = [ 


序 中 使 用 words 对 象 来 记录 字数 。 为 了 节省 空 


subscribers!: 1， 
sure,: 1， 
technology: 1， 
test: 1， 


3 间 ]， 只 选 


用 三 条 


"Education is showing business the way by using technology to share 


w information. How do we do so safely?", 


"Enjoy a free muffin & coffee with Post Plus, our new loyalty Club 


加 exclusive to subscribers!", 


"We're LIVE on Periscope right now answering all your #pet questions 


ww - tweet US yours now!" 


A 
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]; 


var words = {}; 

var tweetText = tweets.join(" "); // 将 所 有 的 推 文 连接 形成 一 个 长 字符 串 

var tweetWords = tweetText.split(" "); // 使 用 split 方法 创建 一 个 单词 数组 

tweetWords .forEach (function (word) { // 为 每 个 单词 创建 一 个 属性 ， 将 其 值 设 置 为 0 
words [word] = 0; 

}); 

tweetWords.forEach (function (word) { // 单 词 每 出 现 一 次 ， 就 将 其 值 增加 1L 
words [word] = words[word] + 1; 

}); 


console.1log (words); 


该 程序 在 短 短 几 行 代码 中 完成 了 多 项 工作 。 首 先 ， 使 用 join 数组 方法 (在 第 8 章 中 介绍 
过 ) 连接 所 有 的 推 文 形成 一 个 长 字符 串 ， 在 每 对 推 文 之 间 有 一 个 空格 。 然 后 ， 使 用 split 方法 
创建 一 个 存放 所 有 单词 的 数组 。split 是 一 个 内 置 的 字符 串 方 法 ， 可 以 用 来 将 一 个 字符 串 拆 分 
为 多 个 部 分 ， 每 个 部 分 作为 数组 的 一 个 元 素 。 例 如 ， 为 message 变量 分 配 一 个 字符 串 ， 如 下 
所 示 : 


Var message = "I love donuts"; 


En 


可 以 通过 调用 该 变量 的 split 方法 将 字符 串 拆 分 为 三 个 元 素 ， 并 将 它们 存放 在 数组 
如 下 所 示 : 


-> 


console.log (message.split(" ")); 


‘iy LL 2 01oven "donuts"] 


传递 给 split 方法 的 参数 是 该 函数 决定 用 来 分 割 文本 的 分 隔 符 字 符 串 。 上 一 个 示例 中 使 
空格 作为 分 阳 符 ， 其 实 任何 字符 串 都 是 可 以 用 作 分 隔 符 的 。 以 下 示例 中 使 用 逗号 作为 分 


AAA 


隅 符 : 


T 
I 


Var CSV = "Kandra Smith,50,The Dungeon of Doom"; 
var details = csv.split(","),; 
console.log(details); 


> ["Kandra Smith", "50", "The Dungeon of Doom"] 


如 果 把 空 字符 串 作 为 参数 传递 给 split， 它 将 创建 一 个 含有 文本 中 所 有 单个 字符 的 数组 : 


Var message = "I love donuts"; 


console.log (message.split("™")),; 


> | 1 We rT vay We Ver, LL ee Ws ti oa i hb 下 臣下 3 nen] 


了 解 split 方法 之 后 ， 我 们 返回 上 述 推 特 分 析 器 程序。 一 旦 生成 了 分 割 好 的 单词 数组 ， 
代码 清单 10-6 遍历 该 单词 数组 两 次 。 第 一 次 遍历 会 创建 以 下 属性 单词 为 键 、 零 为 值 ， 例 
如 第 一 次 遍历 ["T", "love", "donuts"] 会 创建 以 下 属性 : 


words["I"] = 0; 
words["love"] = 0; 


words["donuts"] = 0; 
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如 果 一 个 单词 出 现 多 次 ， 其 属性 每 次 将 被 重 置 一 一 稍 


中 


和 显 见 余 但 不 是 问题 。 第 二 次 遍历 ， 


对 每 次 出 现 的 单词 ， 代 码 都 会 将 其 属性 值 加 1。 


或 者 ， 我 们 可 以 使 用 += 运 算 符 为 每 个 单词 的 计数 增加 1。 我 们 
串 ， 现 在 学 习 += 用 于 数值 的 计算 。+= 可 以 为 已 经 存在 的 数值 累加 一 个 新 数 人 


words["I"] = words["I"] + 1; 
words["love"] words["love"] + 1; 


words["donuts"] = words["donuts"] + 1; 


2 


曾经 学 过 += 用 于 连接 字符 


直 。 以 下 两 条 语句 


words [word] = words [word] + 1; 
words [word] += 1; 


事实 上 ， 如 果 只 是 想 每 次 加 1，++ 运 算 符 就 可 以 实现 。 以 下 两 条 语句 也 是 等 效 的 : 


他 的 


words [word] += 1; 


words [word] ++; 


因为 我 们 想 让 代码 更 加 易于 理解 ， 如 果 使 用 ++ 就 显得 有 些 过 于 精简 了 (++ 还 有 一 些 其 


一 


杂 含义 ， 本 书 不 再 殉 述 )。 读 者 可 能 会 在 程序 中 偶然 碰 到 ++， 但 在 本 书 的 第 四 部 分 之 


前 不 会 


使 用 ++。 


的 键 ， 


所 有 的 单词 已 经 遍历 了 两 次 ， 和 单词 的 每 个 属性 都 可 以 作为 单词 


单词 的 统计 数值 作为 值 。 请 在 JS Bin 上 运行 程序 示例 ， 并 添加 更 多 的 推 文 或 其 他 来 源 


的 文本 进行 分 析 。 


通过 简单 调整 ， 我 们 就 可 以 对 字母 进行 统计 ， 而 不 再 仅 限于 单词 统计 。 以 下 代码 清单 
10-7 显 


示 了 具体 的 调整 方法 ， 


代码 清单 10-7 统计 推 文 中 的 字母 
(http://jsbin.com/rusufi/edit?js,console) 


var tweets = [ /* 与 代码 清单 10-6 相同 */ ]; 

var letters = {}; 

vartweetText = tweets.join(""),; 

vartweetLetters = tweetText.split(""); // 将 空 字符 串 传 递 给 split 来 创建 单个 
/ /字符 的 数组 

tweetLetters.forEach (function (letter) { 


letters[letter.toLowerCase()] = 0;  // 将 所 有 字母 转换 为 小 写 ， 并 将 其 作为 键 


})); 


tweetLetters.forEach (function (letter) { 


letters [letter.toLowerCase ()]+=1; // 使 用 += 运 算 符 为 每 个 字母 的 出 现 次 数 累 加 1 
}yy 


console.log(letters); 


以 上 代码 清单 的 工作 原理 与 代码 清单 10-6 相同 ， 都 是 采用 join 和 split 创建 一 个 数组 ， 
然后 两 次 遍历 数组 进行 统计 。 
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外 


在 下 一 节 中 ， 我 们 将 使 用 方 括号 运算 符 来 处 理 人 有 


进行 管理 。 
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F 意 字符 串 ， 以 便 在 The Crypt 中 对 出 口 


10.2 The Crypt 一 一 使 游戏 出 口 更 加 刺激 好 玩 


本 节 中 ， 我 们 把 方 插 号 运算 符 的 知识 应 用 到 游戏 The Crypt 中 。 图 10-4 显示 了 本 节 的 重 
点 : 通过 出 口 连接 其 他 各 场所 。 
玩家 场所 地 图 
玩家 变量 场所 对 象 通过 出 口 连接 其 他 各 场所 
玩家 对 象 场所 物品 动作 
显示 玩家 信息 场所 出 口 递交 
玩家 物品 显示 场所 信息 抓 取 
图 10-4 ”The Crypt 中 的 游戏 元 素 
目前 看 来 ， 我 们 在 第 9 章 中 定义 的 Place 构造 函数 对 游戏 当前 出 口 暴 露 的 信息 量 有 点 坟 
多 了 : 
= The Kitchen - 你 在 厨房 里 ,这 里 有 一 种 令 人 不 舒服 
0 的 气味 。 
You are in a kitchen. There is a 下。 
disturbing smell. 物语: 
Items: 一 块 奶 栈 
- a piece of cheese 从 后 可 以 通 往 : 
Exits from The Kitchen: 厨房 花园 
- _ The 可 0ST Garden 厨房 橱柜 
- The Kitchen Cupboard 
- The Old Library 书记 
以 上 列 出 了 当 玩 家 离开 当前 位 置 时 会 看 到 的 内 容 。 在 本 节 中 ， 我 们 只 明确 出 口 通 往 的 方 
向 而 并 不 明确 出 口 通 往 的 目的 地 ， 从 而 为 游戏 增加 一 些 神秘 感 ， 如 下 所 示 ; 
Exits from The Kitchen: 厨房 的 出 
- west 
- east 
- south 


这 样 


， 玩 家 只 能 先 朝 着 某 个 方向 前 进 ， 在 到 达 那 上 


之 后 才能 知道 附近 有 什么 ， 这 样 就 增 


|[ 青 
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加 了 一 点 悬念 。 


为 了 帮助 读者 专注 于 使 用 带 有 方 括号 运算 符 的 对 象 来 优化 出 口 〈 这 毕竟 是 本 章 的 主要 内 


容 )， 我 们 将 创建 一 个 简化 版 Place 构造 函数 ， 
用 方 括号 运算 符 的 新 功能 来 更 新 第 9 章 中 的 构造 


10.2.1 ”使 用 对 象 存 放出 口 
为 了 增加 这 一 层 额 外 的 神秘 感 ， 我 们 使 用 


并 对 其 进行 实验 。 然 后 ， 在 10.2.4 节 中 ， 再 使 
一 个 exits 对 象 而 不 是 exits 数组 。 对 象 的 键 是 


方向 ， 诸 如 "north" 或 "the trapdoor'"， 对 象 的 值 是 


向 和 目的 地 ， 如 下 所 示 。 稍 后 ， 我 们 将 把 目的 地 


>north goes to The Kitchen 
>the trapdoor goes to The Dungeon 


代码 清单 10-8 ”一 个 exits 出 口 对 象 
(http:/jsbin.com/daqato/edit2js,console) 


< 


function 
thigs,title 三 


var Place = (title) { 
title; 


}; 


目的 地 。 代 码 清单 10-8 在 控制 台 上 显示 了 方 


隐藏 起 来 。 


// 定 义 一 个 简单 的 Place 构造 函数 


var kitchen = new Placel(nThe Kitchen"); // 使 用 Place 构造 函数 创建 两 个 Place 


var dungeon 


var exits = 


= {}; 
exits["north"] = 
exits["the trapdoor"] = dungeon; 
Var keys = Object.keys (exits) ; 
keys .forEach (function (key) { 
console.log(key + " goes to " 


})3 


// 对 象 


new Place ("The Dungeon'" ) ; 
/ /创建 一 个 空 对 象 并 将 其 分 配给 exits 变量 
kitchen;// 将 Place 对 象 分 配给 exits 对 象 的 属性 ， 方 向 作为 键 


// 使 用 每 个 Place 的 标题 属性 显示 目的 地 
+ exits[key] .title); 


在 以 上 代码 清单 10-8 中 ， 首 先 定义 了 一 个 非常 简单 的 Place 构造 函数 。 我 们 记得 在 第 9 


章 中 ， 当 使 用 new 关键 字 调 用 构造 函数 时 ，JavaScript 会 上 


特殊 的 this 变量 。 


function 
this tit1e: 三 


var Place = (title) { 


title; 


}3 
立即 使 用 


var kitchen = 


我 们 将 this 的 title 属性 设置 为 title 参数 的 值 ， 


动 创建 一 个 空 对 和 象 并 将 其 
如 下 所 示 : 


分 配给 


这 个 构造 函数 来 创建 两 个 Place 对 象 : 


new Place("The Kitchen' ) ， 


Var dungeon = 


new Place ("The Dungeon'" ) ; 


简洁 起 匈 ， 使 用 一 个 单独 的 exits 变量 ， 随 后 ， 让 它 成 为 Place 构造 函数 的 一 部 分 。 


分 配给 
var exits = 


{}; 
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现在 我 们 拥有 了 两 个 Place 对 象 : kitchen 和 dungeon， 将 把 它们 设置 为 不 同方 向 的 目的 
地 。 我 们 在 exits 对 象 上 创建 相应 的 属性 : 方向 为 键 ， 目 的 地 为 值 ， 如 下 所 示 : 


exits["north"] = kitchen; 


exits["the trapdoor'"] = dungeon; 


最 后 ， 使 用 forEach 方法 将 每 个 键 〈( 换 句 话说， 就 是 每 个 方向 ) 依 次 传递 给 指定 的 
函数 : 


console.log(key + " goes to " + exits [key] .title); 


因为 键 是 "north” 和 "thetrapdoor"， 所 以 该 语句 等 价 于 下 面 的 代码 : 


console.log('"north" + " goes to " + exits['"north"] .title); 
console.log("the trapdoor" + " goes to " + exits["the trapdoor"] .title); 


又 因为 exits["north"] 是 kitchen 对 象 ，exits["thetrapdoor"] 是 dungeon 对 象 ， 所 以 上 述 代码 
就 变 成 ; 


console.log('"north" + " goes to " + KiItchen.title) ， 
g 9g 


console.log('"the trapdoor" + " goes to " + dungeon.title); 
以 上 代码 的 输出 结果 都 与 代码 清单 10-8 前 面 的 两 行 输出 内 容 相同 。 
10.2.2 创建 一 个 添加 并 显示 出 口 的 函数 


我 们 使 用 方 括 号 运算 符 成 功 地 关联 了 方向 和 目的 地 。 在 以 下 代码 清单 10-9 中 ， 添 加 了 
两 个 辅助 函数 ，addExit 和 showExits， 用 于 简化 对 出 口 的 添加 和 显示 ， 其 输出 结果 与 代码 清 
单 10-8 相同 : 


>north goes to The Kitchen 
>the trapdoor goes to The Dungeon 


代码 清单 10-9 ”添加 并 显示 出 口 的 函数 
(http://jsbin.com/mibube/edit?js,console) 


var Place = function (title) { 
thiestitle = title; 


var kitchen = new Place ("The Kitchen"); 
var dungeon = new Place("The Dungeon"); 
var exits = {}; 

= function (direction,，place) { // 定 义 addExit 函数 为 指定 方 问 


// 添 加 一 个 场所 


var addExit 


exits[direction] = place; 

}; 

var showExits = function () { // 定 义 showExit 函数 为 每 个 出 口 显示 目的 地 
Var keys = Object.keys (exits); 


keys.forEach(function (key) { 
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console.log(key + " goes to " + exits [key 


}) 
}; 
addExit ("north", kitchen); // 两 次 调用 adqdExit， 添 加 两 个 出 口 
addExit ("the trapdoor'", dungeon); 
showExits (); // 调 用 showExits 显示 所 有 出 口 的 相关 信息 


] .title); 


以 上 代码 中 ，addExit 函数 接受 两 个 参数 : 表示 方向 的 direction 字符 串 和 表示 场所 的 
e 对 象 。direction 字符 串 成 为 出 口 exits 对 象 上 一 个 新 的 键 ，Place 对 象 变 为 相应 的 值 。 如 


Plac 
下 所 示 : 

addExit ("north", kitchen); 
将 执行 下 面 的 代码 

exits['"north'"] = kitchen; 


showExits 函数 遍历 exits 对 象 所 有 的 键 〈 即 遍历 了 所 有 的 方向 )， 并 显示 每 个 方向 的 目 
的 地 。 


10.2.3 ”设置 每 个 场所 对 象 的 出 口 集合 
我 们 已 经 了 解 如 何 使 用 exits 对 象 来 为 方向 和 目的 地 建 模 ， 但 每 个 场所 对 象 都 需要 一 个 


自己 的 出 口 集合 ， 你 一 定 不 想 把 仙女 游乐 园 的 出 口 与 末日 地 牢 的 | 
10-10 站 
要 他 


口 ， 


| 建 三 个 场所 : 书房 〈library)、 厨 房 〈kitchen ) 和 花园 〈garden )， 并 为 厨房 添加 两 个 出 
如 下 所 示 : 

> Exits from The Kitchen: 

>south 

>west 


代码 清单 10-10 ”Place 构造 函数 中 的 出 口 对 象 
(http://jsbin.com/foboka/edit?js,console) 


var Place = function (title, description) { 
thig title 三 titley 


this.exits = {}; // 在 构造 函数 中 添加 一 个 exits 对 象 ， 以 便 创建 的 每 个 ] 


// 会 获得 一 组 出 
this.addExit = function (direction, exit){ 


this.exits[direction] = exit; 


}; 


口 混在 一 起 。 在 代码 清和 
Pp， 将 exits 对 象 移 到 了 Place 构造 函数 中 。 为 了 测试 新 的 Place 构造 函数 的 功能 ， 需 


肋 所 都 


// 将 addExit 函数 设置 


// 为 每 个 Place 对 象 的 


方法 


this .showExits = function () { // 将 showExits 函数 设置 为 每 个 Place 对 象 


// 的 方法 
console.log ("Exits from " + this.title + 
Object.keys (this.exits) .forEach (function 
console.log (key); 
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} 
}; 


var library = new Place ("The 01d Library");  // 使 用 Place 构造 函数 创建 
//Place 对 象 


var kitchen = new Place("The KiItchen' ) ，; 

Var garden = new Place("The Kitchen Gardqen" ) ; 

kitchen.addqExit ("south"，1ibrary) ; // 使 用 圆 点 运算 符 调 用 将 厨房 连接 到 书房 和 花园 
// 的 addExit 方法 


kitchen.addExit ("west", garden); 
kitchen.showExits (); // 使 用 圆 点 运算 符 调用 showExits 方法 


在 以 上 代码 中 ，addExit 和 showExits 函数 与 Place 和 Exit 对 象 一 起 使 用 ， 我 们 将 这 两 个 
函数 与 构造 函数 中 的 其 他 场所 代码 捆绑 在 一 起 ， 意 义 在 于 之 后 就 可 以 使 用 圆 点 运算 符 和 括号 
来 调用 这 些 函数 ; 


上 


kitchen.addExit ("south", library); 
kitchen.showExits(); 


以 下 代码 清单 10-11 使 用 相同 的 Place 代码 构建 一 个 更 大 的 地 图 ， 将 四 个 地 方 连接 在 一 
起 ， 如 图 10-5 所 示 。 


The Kitchen Garden The Kitchen The Kitchen Cupboard 


The Old Library 


图 10-5 拥有 四 个 场所 位 置 的 地 图 


其 中 两 个 场所 位 置 的 输出 结果 显示 在 控制 台 上 


> Exits from The Old Library: 
>north 

> Exits from The Kitchen: 
>south 

>west 


>east 


代码 清单 10-11 拥有 四 个 场所 位 置 的 地 图 
My http://isbin.com/bufico/edit?js,console) 


var Place = function (title, description) { // 使 用 与 代码 清单 10-10 相同 的 
//Place 构造 函数 


thie. title = Citles 

this.exits = {}; 

this.addExit = function (direction, exit) { 
this.exits[direction] = exit; 

}; 


this.showExits = function () { 
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Console.1og("Exits from " + this.title + ":"); 


Object .keys (this.exits) .forEach (function (key) { 


console.log (key); 


全 时 


}; 


var library = new Place ("The 01ld Library");  // 使 用 构造 函数 创建 四 个 Place 


// 对 象 


var kitchen = new Place("The Kitchen'" ) ; 


Var garden = new Place("The Kitchen Garaqen'" ) ; 


var cupboard = new Place("The Kitchen Cupboard"); 


library. 


adqdExit ("north"，kitchen) ; // 添 加 通 向 厨房 的 出 


garden.addExit ("east", kitchen),; 


cupboard.addExit ("west", kitchen); 


kitchen. 
kitchen. 
kitchen. 
library. 
kitchen. 


addExit ("south"，1ibrary) ; // 添 加 通 往 书房 的 出 
addExit ("west", garden); 

addExit ("east", cupboard); 

showExits (); // 显 示 书 房 和 厨房 的 出 口 
showExits(); 


我 们 注意 到 ， 


所 。 我 们 可 以 将 Place 构造 函数 从 一 


日 定义 了 一 个 he 构造 函数 ， 就 可 以 根据 需要 用 它 创建 和 连接 许多 场 


个 冒险 场所 移植 到 另 一 个 场所 ， 构 造 函 数 本 身 的 代码 保 


持 不 变 ， 需要 改变 的 只是 我 们 创建 的 地 点 ， 即 地 图 数据 。 


10.2.4 将 exits 对 象 添加 到 完整 的 Place 构造 函数 


， 我 们 已 经 学 会 如 何 将 exits 对 象 与 方 括号 运算 符 结合 起 来 管理 游戏 中 Place 
为 了 重点 学 习 方 括号 ， 我 们 使 用 了 简单 版 Place 构造 函数 来 创建 代码 。 现 


在 10.2 节 
对 象 之 间 的 连接 。 
在 我 们 将 增强 版 


式 化 输出 ， 如 下 所 示 : 


以 下 代码 清 


的 出 口 与 第 9 章 中 的 构造 函数 结合 起 来 ， 为 图 10-6 所 示 的 每 个 地 方 生 成 格 


You are in a kitchen. There is a disturbing smell. 


Items: 
- a piece of cheese 


Exits from The Kitchen: 
- south 


各 方向 的 列表 


图 10-6 调用 showInfo 时 Place 对 象 在 控制 台 上 的 输 昌 


单 10-12 显示 了 完整 的 Place 构造 函数 代码 。 大 部 分 代码 都 在 第 9 章 中 讨论 


上 上 


过 ， 如 果 需 要 ， 可 以 温习 这 些 知识 。 新 的 出 口 代码 以 粗 体 显示 并 添加 了 注释 。JS Bin 上 的 代 
码 清单 包括 了 在 下 一 节 中 讨论 的 地 图 信息 。 
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代码 清单 10-12 ”Place 构造 函数 
(http://jsbin.com/zozule/edit2js,console) 
Var Place = function (title, description) { 
Var newLine = spacer.newLine(); 
this.title = title; 
this.description = description; 
this: items = [];» 
this.exits = {}; // 将 exits 属性 从 数组 更 改 为 对 象 
this.getItems = function () { 
Var itemsSstring = "Items: " + newLine,; 
this.items.forEach (function (item) { 
itemsString += "0 - " + item; 
itemsString += newLine; 
ys 
return itemsString; 
js 
this.getExits = function () { 
var exitsString = "Exits from " + this.title; 
exitsString += ":" + newLine; 
Object .keys (this.exits) .forEach(function (key) { // 更 狐 getExits 方 
// 法 来 显示 方向 而 不 
// 显 示 目 的 地 


exitsString += " - " + key; 


exitsString += newLine; 
}); 
return exitsString; 
}; 
this.getTitle 
return spacer.box( 
thistitle. 
this.title.length + 4, 


nn 


人 


function 


上 


this.getInfo 


function 


() { 


this.getTitle(); 


Var infoString 


infoString += this.description; 

infoString += newLine + newLine; 

infoString += this.getIitems() + newLine,; 
infoString += this.getExits(); 

infoString += spacer.line(40, "=") + newLine; 


return infoString; 


hs 


this.showInfo 


function 


OA 


console.log(this.getIinfo()); 


}; 


this.addItem = 


function 


(item) 


{ 
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this.items. push(Iitem) ， 


this.addExit = function (direction, exit) { // 更 新 addExit 了 荫 数 以 
// 使 用 exits 对 象 
this.exits[direction] = exit; 
}; 


}; 
使 用 这 个 最 新 版 本 的 Place 构造 函数 ， 可 以 创建 场所 对 象 ， 
口 ， 并 在 控制 台 上 显示 格式 化 的 信息 (由 spacer 提供 )。 
10.2.5 测试 Place 构造 县 数 


为 了 测试 Place 构造 函数 ， 我 们 对 代码 清单 10-11 中 的 地 图 进行 了 重建 ， 现 在 地 图 上 连 
接 了 四 个 地 方 ，kitchen、library、garden 和 cupboard。 以 下 代码 清单 10-13 显示 了 创建 地 图 
的 代码 ， 输 出 结果 如 图 10-6 所 示 。 


3 “代码 清单 10-13 “测试 Place 构造 函数 
i (http://jsbin.com/zozule/edit?js,console) 


玛 


里 这 些 场所 的 物品 和 出 


var kitchen = new Place( // 使 用 new 关键 字 调 用 Place 构造 函数 以 创建 场所 对 象 
The Kitehenm'", 


"You are in a kitchen. There is a disturbing smell." 


Var library = new Place 人 
"The Old Library", 


"You are in a library. Dusty books line the walls." 


Var garden = new Place 人 
"The Kitchen Garden", 


"You are in a small, walled garden." 


var cupboard = new Placel( 
"The Kitchen Cupboard", 


"You are in a cupboard. It's surprisingly roomy." 


kitchen.addIitem('"a piece of cheese") ; // 为 每 个 场所 添加 物品 
library.addIitem("a rusty key"); 

cupboard.addIitem("a tin of spam"); 

kitchen.addExit ("south", library); // 为 厨房 添加 出 
kitchen.addExit ("west", garden); 


kitchen.addExit ("east", cupboard); 
library.addExit ("north", kitchen); // 添 加 通 
garden.addExit ("east", kitchen),; 


主 厨房 的 出 


| 


~ 


cupboard.addExit ("west", kitchen); 
kitchen.showInfo(); // 在 控制 台 上 显示 厨房 的 信息 
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在 创建 地 图 代码 之 后 ， 通 过 调用 kitchen.showInfo 来 测试 kitchen 对 象 及 其 物品 和 出 口 是 
否 已 按 预 期 创建 。 


10.3 The Crypt 一 一 开始 游戏 ! 


即将 大 功 告 成 ! 为 了 给 玩家 建立 并 展示 一 片 探索 天 地 ， 我 们 已 经 拥有 : 
图 spacer 命名 空间 

国 Player 构造 函数 

图 Place 构造 函数 

下 
在 玩家 能 够 自由 冒险 之 前 ， 我 们 还 需要 添加 一 项 内 容 : 
国 游戏 的 控制 部 分 

10-7 显示 了 在 本 节 中 将 要 创建 的 三 个 游戏 控制 功能 


Players Places Maps 


一 


Game 


howing player inf plac xit render 


player items showing place info get 


Player Constructo Place Constructo go 


图 10-7 The Crypt 中 的 游戏 元 素 


玩家 能 够 在 控制 台 提示 符 下 发 布 命令 ， 从 一 个 地 方 移动 到 另 一 个 地 方 ， 并 捡拾 他 们 找到 
的 物品 。 例 如 ， 玩 家 要 移动 到 北边 并 拿 起 一 个 物品 ， 就 在 控制 台 提 示 符 下 输入 : 


>go ("north") 


>get () 
因为 使 用 了 构造 函数 ， 游 戏 控制 代码 实际 上 很 短小 ， 如 下 所 示 。 


3 ”代码 清单 10-14 ”运行 游戏 
0 (http://jsbin.com/sezayo/edit?js,console) 


var render = function () { // 定 义 render 函数 来 清除 控制 台 、 玩 家 和 场所 信息 
console.clear (); 
player.place.showInfo(); 
player.showInfo("*"),; 

3 

var go = function (direction) { // 定 义 go 函数 ， 将 玩家 移动 到 指定 方向 的 地 方 


player.place = player.place.exits[direction]; 


render () ; 
return Wy 
1 
var get = function () { // 定 义 get 函数 ， 让 玩家 捡拾 物品 
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Var item = player.place.items.pop(); 
player.addIitem(item); 


render () ; 
return 71， 
上 
var player = new Player ("Kandra"，50); // 创 建 玩 家 ， 
// 在 厨房 里 
player.addIitem("The Sword of Doom"); 
player.place = kitchen; 
render () ; // 调 用 render 来 显示 玩家 和 场所 的 初始 信息 


给 他 们 一 把 剑 ， 并 把 他 们 放 


在 以 上 代码 中 ， 创 建 了 三 个 函数 : render、go 和 get， 下 一 节 将 详细 讲解 每 个 函数 的 功 
能 。go 和 get 结束 时 将 返回 一 个 空 字 符 串 ""。 在 控制 台 上 调用 这 些 


院 


10.3.1 


在 每 个 游戏 开始 和 每 次 玩家 采取 行动 时 ， 我 们 都 希望 刷新 控 和 


对 象 和 Player 对 每 都 采用 showlInfo 方法 来 显示 它们 当前 的 状态 ， 例 如 : 


| 


我 们 可 以 将 程序 显示 的 每 一 
很 见长 。 如 果 在 玩家 每 一 次 行动 之 后 都 清除 控制 台 上 的 所 有 人 


旦 序 将 玩家 的 当前 位 置 分 配给 place 属性 ， 显 示 当 前 位 置 的 信息 需要 使 用 以 下 代码 : 


有 。 返 回 一 个 空 字 符 串 的 意义 在 于 防止 控制 台 上 显示 undefined。 


刷新 显示 


render 


函数 ， 会 自动 显示 其 返回 


判 台 上 的 显示 信息 。Place 


player.showInfo("*"),; 
kitchen.showInfo(); 


player.place.showIinfo(),; 


条 文本 信息 源源 不 断 地 添加 并 保留 在 控制 台 上 ， 但 这 样 显 得 


日 


信息 ， 误 


可 以 让 玩家 在 下 次 行动 


时 有 一 个 干净 空白 的 控制 台 界 面 ， 这 样 会 让 人 感觉 更 清爽 。 可 以 采用 clear 方法 来 清除 控制 


台 上 的 文本 ， 如 下 所 示 : 


console.clear (); 


PN 
CN 
un 


10.3.2 ”探索 地 图 一 一 go 


玩家 想 要 移动 到 新 位 置 ， 只 要 按照 指定 方向 调用 go 函数 即 可 : 


go(l"south"),; 


找到 玩家 指定 方向 的 目的 地 ， 就 为 其 赋值 : 


pl 


在 赋值 运 和 


ayer.place = player.place.exits [direction]; 


指定 方向 的 Place 对 象 ， 使 用 圆 点 运算 符 访问 exits 对 象 : 
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玩家 在 移动 和 捡拾 物品 后 刷新 控制 台 ， 这 时 并 不 需要 重复 显示 代码。 我 们 将 显示 代 人 码 包 
装 在 render 函数 内 就 可 以 根据 需要 进行 调用 。 


Mg ed 使 用 exits [direction] 指定 方向 ， 使 用 方 括号 运算 符 获 取 


第 10 章 方 括号 运算 符 : 灵活 的 属性 名 称 


player; // 玩 家 对 象 
player.place; // 玩 家 的 当前 位 置 

//Place 对 象 
player.place.exits; /7/ 当 前 位 置 的 出 

// 对 象 的 键 为 方向 

// 值 为 目的 地 
player.place.exits [direction]; // 指 定 方 向 的 场所 

//Place 对 象 . 


蔡 换 他 们 的 旧 位 置 。 


10.3.3 ”收集 物品 
玩家 通过 调用 get 函数 来 捡拾 物品 : 


get 


get (); 


玩家 从 当前 位 置 拿 走 了 物品 ， 并 将 其 


因为 玩家 的 位 置 已 经 有 所 移动 ， 因 此 将 目的 地 的 Place 对 象 分 配给 玩家 的 place 属性 ， 


添加 到 玩家 的 物品 数组 中 。 当 前 位 置 


Pt 


playerplace， 当 前 位 置 的 物品 保存 在 playerplace.items 数组 中 ， 要 移 除 并 返回 items 数组 中 的 


最 后 一 个 物品 ， 需 要 使 用 pop 方法 : 


Var item = player.place.items.pop(); 


然后 将 该 物品 添加 到 玩家 的 物品 集合 


player.addIitem(item); 


就 是 这 样 ， 玩 家 拥有 了 移动 的 能 力 ， 可 以 从 一 个 地 方 勇 敢 地 移动 到 另 一 个 地 方 ， 并 收获 


他 们 找到 的 宝藏 。 


10.3.4 设计 一 个 更 大 的 冒险 游戏 一 一 Jahver 的 船 

我 们 所 期 待 的 冒险 世界 绝对 不 仅仅 是 围绕 厨房 的 4 个 位 置 。 想 要 涉足 更 神秘 的 领域 ， 再 
造反 乌托邦 的 未 来 ， 编 织 充满 明 谋 的 密 网 ， 我 们 只 需 改 变 代码 的 地 图 部 分 : 创建 地 点 ， 通 过 
出 口 把 这 些 地 点 连接 起 来 ， 再 给 这 些 地 点 存放 一 些 有 趣 的 器 物 。 


在 开始 之 前 ， 在 JS Bin 上 试 试 另 一 个 简单 的 
只 要 单 击 Run 就 可 以 启动 游戏 ， 该 游戏 发 


ny 


板 ， 然 后 尝试 添加 更 多 的 场所 ， 祝 你 搜寻 愉快 ! 


10.4 下 一 步 目 标 


现在 ， 我们 已 经 拥有 这 样 一 款 工作 版 游戏 ， 


冒险 游戏 ，http:/jsbin.com/yadabo/edit?console。 


FE 在 一 个 名 为 The Sparrow“〈 麻 涛 ) 的 小 货轮 上 。 
目前 ， 你 已 经 拥有 物品 blaster， 这 里 还 有 6 个 其 他 物品 等 着 你 去 搜寻 。 打 开 JavaScript 面 


但 The Crypt 的 代码 还 不 是 很 强大 ， 仍 然 存 


在 许多 问题 。 例 如 ， 玩 家 如 果 输 入 一 个 尚 不 存 刀 


E 的 方向 ， 就 会 轻易 导致 游戏 崩 涡 。 玩 家 可 以 


在 控制 台 上 访问 所 有 游戏 对 象 ， 这 也 会 造成 大 问题 。 例 如 ， 玩 家 可 以 轻而易举 地 授予 自己 额 
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外 的 宝藏 ， 轻 而 易 举 就 能 到 达 一 个 新 的 位 置 ， 如 下 所 示 : 


>player.addItem("riches beyond my wildest dre 


>player.place = treasureRoom 


游戏 怎 能 如 此 一 践 而 就 ?游戏 


ams") 


破解 ! 


必须 有 更 多 的 挑战 ， 有 些 难题 具 能 由 特定 的 物品 才能 


在 本 书 的 第 二 部 分 将 解决 上 述 问题 ， 具 体 方法 如 下 : 将 代码 拆 分 为 模块 、 阻 止 访问 对 


象 、 设 置 代码 运行 时 的 条 件 、 将 数据 与 数据 显示 分 离 。 随 着 程序 变 得 日 趋 庞 大 和 复杂 


的 代码 组 织 结构 将 帮助 开发 者 更 好 地 设计 和 管理 程 
书 第 三 部 分 ) 未 雨 绸 缪 。 


10.5 本章 小 结 


四 使 用 方 括号 之 间 的 字符 串 来 指定 属性 名 称 ; 


56; 
kitchen; 


player["Kandra"] = 
exits["north"] = 


words["to"] = words['"to"] + 1; 


4 


国 特别 注意 ， 


player['"Kandra Smith"] = 56; 
exits["a gloomy tunnel"] = 


words["!"] = 0; 
图 在 调用 函数 时 ， 使 用 函数 参数 来 动态 分 配属 性 名 称 ; 
{}; 


var updateScore = 


dungeon; 


Var SCOres = 
function 


scores [playerName] = score; 


updateScore ("Dax", 2000);， 


console.log(scores["Dax"] ) ; 


(playerName, score) { 


这 样 


js 


这， 而 且 还 为 程序 将 来 用 于 网 络 环境 (本 


当 属性 名 称 含有 空格 符 或 其 他 字符 时 ， 请 使 用 方 括 号 : 


图 通过 将 一 个 对 象 作为 参数 传递 给 Object.keys 方法 来 创建 对 象 的 键 的 数组 : 


var scores = { 

: 100, 
60， 

: 30000 


Kandra 
Dax : 
Blinky 
}; 
var keys = 


Object.keys (scores); // ['"Kandra", 


图 使 用 split 方法 将 字符 串 拆 分 为 数组 ， 并 将 用 于 在 字符 


nDax" 3 


"Blinky"] 


参数 传递 给 它 : 


var query = 


"page=5&items=10&tag=pluto"; 
a4 


var options = query.split ("&"); ["page=5", 
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Be 中古 


"items=10", 


和 定 断 点 位 置 的 字符 作为 


"tag=pluto"] 


第 一 部 分 组 织 代 码 


对 程序 员 而 言 ， 共 享 代码 是 司空 见 惯 的 事情 。 因 为 前 华 们 已 经 帮 我 们 解决 了 许多 问题 ， 
而 我 们 对 某 些 具体 问题 的 解决 方案 也 会 在 自己 未 来 的 项 目 中 ， 或 团队 其 他 成 员 中 ， 甚 至 更 广 
泛 的 开发 人 员 社 区 中 得 到 应 用 。 在 共享 的 过 程 中 ， 最 重要 的 一 点 是 明示 其 他 人 如 何 使 用 这 些 
共享 代码 模块 。 具 体 方法 是 定义 一 个 清晰 的 公共 接口 ， 或 者 定义 一 组 能 够 供用 户 使 用 的 属性 
和 函数 ， 而 模块 的 内 部 构件 〈 即 程序 如 何 运行 ) 是 非 共享 部 分 ， 必 须 得 到 保护 ， 不 能 对 他 人 
开放 。 在 本 书 第 二 部 分 ， 将 讨论 如 何 通 过 本 地 变量 (而 不 是 全 局 变量 ) 的 方法 将 某 一 模块 实 
现 隐藏 起 来 。 

随 着 程序 越 来 越 长 ， 对 代码 进行 组 织 优化 的 需求 也 随 之 增长 。 在 一 些 比较 长 的 程序 中 ， 
我 们 发 现 有 些 模式 和 过 程 反 复出 现 。 本 书 第 二 部 分 将 介绍 如 何在 代码 中 通过 模块 的 方法 来 提 
高 程序 的 灵活 性 、 重 用 性 和 可 维护 性 。 此 外 ， 还 介绍 了 另 一 种 提高 程序 灵活 性 的 方法 : 使 用 
论语 句 ， 只 有 在 符合 指定 条 件 的 情况 下 ， 才 能 执行 某 部 分 代码 。 

模块 通常 在 一 个 项 目 中 执行 某 些 特定 的 、 明 确 的 任务 。 三 种 常见 类 型 的 模块 分 别 是 模 
型 、 视 图 和 控制 器 。 其 中 ， 模 型 用 于 表示 和 处 理 数 据 ， 视 图 用 于 在 模型 中 呈现 数据 ， 控 制 器 
用 于 响应 用 户 或 系统 动作 并 对 模型 和 视图 进行 相应 更 新 。 

本 书 第 二 部 分 的 最 后 一 个 内 容 是 将 游戏 The Crypt 拆 分 成 模块 ， 并 更 新 游戏 ， 使 其 包含 
诸多 挑战 ， 即 玩家 需要 解决 的 难题 。 
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本 章 内 容 包括 ; 

图 全 局 变量 的 危险 性 

图 局 部 变量 的 优势 

图 使 用 命名 空间 来 减少 全 局 变量 
图 使 用 涵 数 创建 局 部 交 量 

图 为 用 户 返回 接口 


我 们 希望 用 户 能 够 与 基于 控制 台 的 程序 进行 交互， 但 又 不 想 给 用 户 太 多 控制 权利 ! 本 章 


探讨 了 实现 上 述 想法 的 有 具体 方法 : 在 控制 台 上 既 对 用 户 隐 藏 部 分 程序 ， 又 对 用 户 开放 部 分 程 
序 ， 他 们 可 以 定义 被 允许 使 用 的 属性 和 方法 。 例 如 ， 对 于 一 个 测验 程序 ， 用 户 应 该 能 够 提交 
答案 ， 但 是 不 外 E 修 CL 分 数 : 


>quiz.submit ("Ben Nevis") // 允许 用 户 这 样 做 
>quiz.score = 1000000 // 不 允许 用 户 这 样 做 


通过 将 公共 接口 与 程序 使 用 的 私有 变量 和 函数 分 离 ， 程 序 开发 者 可 以 明确 表明 自己 的 态 


度 ， 说 明 用 户 能 够 做 什么 ， 以 及 其 他 程序 员 在 使 用 该 代码 时 应 该 做 什么 ， 还 可 以 降低 代码 被 


滥用 的 风险 。 这 样 做 对 程序 ， 对 玩家 ， 以 及 对 其 他 程序 员 都 是 有 益 的 。 


实现 上 述 想 法 ， 函 数 是 关键 。 在 函数 之 外 声明 的 变量 可 以 在 程序 中 的 任何 地 方 访问 ， 而 


在 E 


函数 内 声明 的 变量 上 只 能 在 函数 内 访问 。 本 章 将 介绍 如 何 从 那些 允许 用 户 访问 其 属性 和 方法 


的 函数 返回 对 象 。 构 造 函 数 也 是 函数 ， 读 者 将 看 到 如 何 使 用 特殊 的 this 对 和 象 来 设置 公共 属性 


和 方法 。 


最 后 ， 我 们 将 所 学 到 的 内 容 应 用 到 The Crypt 游戏 ， 撤 销 用 户 对 构造 函数 、 位 置 和 玩家 


属性 的 访问 权限 ， 提 供 显示 玩家 、 位 置信 息 以 及 导航 地 图 的 方法 。 人 允许 用 户 进行 以 下 动作 : 


>game .go ("north") // 移 动 位 置 
>game .get () // 捡 拾 物品 


禁止 用 户 采用 以 下 做 法 在 游戏 中 作 路 : 


>player.health = 1000000 
>player.place = exit 
>player.items.push("The Mega-Sword of Ultimate Annihilation") 


下 面 ， 我 们 首先 看 看 在 程序 中 随处 可 见 的 变量 陷阱 。 
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11.1 全 局 变量 的 危险 性 


在 本 书 的 第 2 草 ， 我 们 就 学 习 了 如 何 声明 、 赋 值 和 使 用 变量 。 下 面 的 代码 清单 显示 
个 非常 简单 的 过 程 示 例 ， 在 控制 台 上 显示 一 座 山峰 的 名 字 : 


串 


>Ben Nevis 


上 有 。 代码 清单 1-1 声明、 赋值 和 使 用 变量 
Wy (http:/jsbin.com/gujacum/edit?js,console) 
var mountain; 
mountain = "Ben Nevis"; 


console.log (mountain) ; 


以 上 代码 中 ， 第 一 行 声明 变量 mountain， 然 后 ， 可 以 在 整个 代码 中 使 用 该 变量 ， 我 们 为 
其 分 配 了 一 个 值 ， 并 将 其 作为 参数 传递 给 console.log。 
程序 中 的 函数 也 可 以 访问 mountain 变量 ， 如 图 11-1 所 示 。 


函数 可 以 看 到 和 使 用 在 
函数 之 外 声明 的 变量 


EunecElon (Od 


mountain = "Ben Nevis"; OO console.1og (mountain) 


} 


图 11-1 函数 可 以 看 到 函数 体外 的 mountain 变量 


Tv 


下 面 的 代码 清单 显示 了 使 用 mountain 的 showMountain 函数 ， 其 输出 结果 与 代码 清 
单 11-1 相同 。 


3 “代码 清单 -2 在 函数 内 访问 变量 
(http://jsbin.com/zojida/edit?js,console) 


var mountain = "Ben Nevis";  // 在 任何 函数 之 外 声明 mountain 变量 
var showMountain = function () { 
console.log (mountain); // 即 使 在 函数 内 也 可 以 使 用 这 个 变量 


3 


showMountain(); 


变量 ， 这 样 的 变量 称 为 全 局 变量 。 全 局 变量 貌似 非常 好 用 : 只 需 声 明 一 次 ， 就 可 在 程序 的 任 
何 地 方 自由 使 用 它们 。 但 不 季 的 是 ， 它 们 有 一 些 不 中 之 处 ， 而 且 通 常 认为 是 一 些 很 严重 的 缺 
陷 。 下 面 ， 我 们 来 研究 避免 使 用 这 些 全 局 变量 的 原因 。 


11.1.1 访问 所 有 区 域 一 一 偷 复 和 复 改 


我 们 希望 用 户 能 够 在 控制 台 上 与 程序 进行 交互 ， 但 是 又 不 想 让 他 们 闫 探 到 程序 中 所 有 的 
。 下 面 的 代码 清单 显示 了 一 个 小 测验 。 
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像 mountain 这 样 ， 变 量 声明 不 在 任何 函数 体内 ， 因 此 在 程序 的 任何 地 方 都 可 以 访问 访 


变 


wl 
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代码 清单 1-3 一 个 小 测验 
(http://jsbin.com/nubipi/edit?js,console) 


var question = "What is the highest mountain in Wales?",; 
Var answer = "Snowdon'",; 


console.log(question),; 
因为 question 和 answer 是 全 局 变量 ， 所 以 在 整个 程序 中 和 控制 台 上 都 可 以 访问 和 使 
用 。 一 旦 用 户 运行 这 个 程序 ， 在 控制 台 提 示 符 下 ， 他 们 可 以 输入 answer， 在 按 下 《Enter〉 键 
后 ， 直 接 将 answer 变量 的 值 显 示 出 来 。 用 户 就 这 样 轻而易举 地 疾 控 到 了 我 们 极 客 的 世界 ! 


>answer 


Snowdon 


这 可 不 仅仅 是 简单 的 帘 视 ， 而 是 一 个 大 问题 ， 这 意味 着 摆 哪 的 算 改 ! 用 户 可 以 随意 改变 
全 局 变量 的 值 ， 他 们 就 可 以 更 新 修改 测验 分 数 、 银 行 余额 、 周 转速 率 、 商 品 价格 和 考试 


答案 。 


>answer = "Tryfan" 


11.1.2 访问 所 有 区 域 一 -借助 于 实现 


有 时 候 ， 不 能 立即 实现 的 想法 也 很 重要 ， 我 们 需要 一 些 时 间 才 能 够 对 其 充分 理解 。 如 果 
有 些 想法 并 不 是 单 击 一 次 鼠标 就 能 实现 ， 也 不 必 担 心 一 一 读者 可 以 在 阅读 本 章 的 其 他 例子 之 
后 ， 随 时 返回 来 再 次 理解 。 

偷 笑 和 修改 不 仅仅 只 是 用 户 的 问题 ， 还 有 可 能 是 程序 员 的 问题 〈 见 下 栏 “ 谁 在 使 用 你 的 
代码 ?”)。 如 果 其 他 程序 员 使 用 你 编写 的 代码 ， 你 可 不 希望 他 们 在 私下 对 你 的 代码 进行 修 
改 ， 或 者 是 以 你 的 代码 内 部 构件 为 基础 来 编写 他 们 自己 的 代码 。 另 外 ， 当 你 发 布 一 个 内 部 使 
用 了 更 高 效 算 法 的 新 版 本 代码 时 ， 依 赖 于 这 些 变量 的 其 他 代码 就 会 出 问题 。 


人 你 的 代码 ? 

回忆 一 下 ， 我 们 在 第 7 章 中 创建 了 spacer 函数 ， 后 来 一 直 在 The Crypt 代码 中 使 用 
些 函 数 。 这 就 是 一 个 我 们 使 用 自己 创建 代码 的 例子 。 

程序 员 通 常 属于 某 一 个 团队 ， 团 队 各 成 员 针 对 同一 个 程序 的 不 同方 面 协同 工作 。 没 必要 让 
每 个 成 员 分 别 创建 自己 的 格式 化 函数 ， 他 们 应 该 全 都 可 以 使 用 我 们 的 spacer 命名 空间 。 

他 们 分 享 使 用 spacer 命名 空间 后 ， 对 其 赞美 有 加 ， 还 鼓励 我 们 更 广泛 地 分 享 spacer 命 
名 空间 。 于 是 我 们 将 spacer 命名 空间 代码 上 传 到 了 社区 代码 库 中 ， 例 如 Github.com 
(https://github.com ) 或 npmjs.com ( https://www.npmjs.com )， 这 样 其 他 程序 员 就 可 以 下 载 
和 使 用 该 代码 ， 其 至 对 它 进行 政 进 和 扩展 。 

有 一 个 伯乐 看 中 了 spacer 代码 ， 并 对 其 进行 了 深入 开发 。 现 在 ，spacer 代码 甚至 有 了 
自 己 的 网 站 ! 该 网 站 人 气 很 旺 ， 大 家 都 在 使 用 spacerjs 库 。 区 


用 户 应 该 能 够 访问 接口 〈 即 公开 的 功能 )， 而 不 应 该 关心 程序 是 如 何 实现 的 〈 即 这 些 功 
能 是 如 何 编写 代码 的 )。 


这 
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接口 与 实现 


接口 是 开发 者 希望 用 户 访问 的 一 组 属性 和 还 数 ， 是 这 
[174| | 互 , 例如 ATM 上 的 屏幕 、 按 钮 和 出 钞 口 。 


下 这 


属性 和 函数 与 应 用 程序 的 交 


实现 是 使 应 用 程序 在 幕后 完成 工作 的 代码 。 用 户 通常 看 不 到 它 
工作 的 代码 包括 : ATM 如 何 与 银行 通信 以 及 ATM 如 何 识别 和 清 


。 例 如 


使 ATM 正常 
点 钞票 
例如 ， 要 在 The Crypt 中 实现 地 点 之 间 的 连接 ， 可 以 对 出 口 方 向 使 用 exits 数组 ， 对 该 出 
口 所 通 往 的 目的 地 使 inati 


的 地 使 用 destinations 数组 。 如 下 所 示 


var exits = 


= []; 
var destinations 


[]; 


函数 来 管理 


然后 ， 编 写 一 个 addExit 函 E 和 添加 新 的 出 口 。 


var addExit 


function (direction, destination) 
exits.push (direction); 


{ 
destination.push (destination).,; 
}; 
我 们 期 望 其 他 使 用 Place 对 象 进行 编程 的 程序 员 也 能 够 使 用 addExit 函数 (图 11-2)。 
接口 实现 
exits 
用 户 能 够 调用 array 
addExit [] 
一 一 > adqdExit 
destinations 
NO y ee 
用 户 不 能 够 访问 
exits 和 destinations 
图 11-2 | 该 能 够 使 用 接口 ， 而 不 能 够 使 用 实现 
上 图 显示 ，addExit 是 接口 的 一 部 分 ， 是 用 户 可 以 使 用 的 属性 和 函数 的 集合 。 
addExit ("north", kitchen); // 很 好 用 户 在 使 用 函数 
但 是 如 果 用 户 可 以 访问 exits 和 destinations 变量 ， 他 们 可 能 会 绕 过 函数 而 直接 使 用 这 些 
exits.push('"north'" ) ; / /糟糕 用 户 在 访问 变量 
destinations.push (kitchen).,; 
目前 ， 我 们 的 工作 进展 顺利 ， 其 他 程序 员 的 编程 工作 也 进展 顺利 。 在 重新 查看 代码 后 ， 
我 们 决定 通过 使 用 单个 对 和 象 来 改进 两 个 独立 的 数组 
var exits = {}; 
// destination 数组 消失 ， 在 新 的 实现 中 不 再 需要 destination 数组 
为 了 使 用 实现 exits 的 新 方法 ， 我 们 对 addExit B 
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var addExit = function (direction, destination) { 
exits [qirection]l = destination; 


}; 


使 用 该 接口 的 程序 员 看 不 到 他 们 的 程序 有 任何 变化 。 但 是 绕 过 接口 直接 访问 变量 的 程序 
员 发 现 他 们 的 程序 运行 中 断 了 !《〈 见 图 11-3) 


addExit ("north", kitchen); // 很 好 ， 照 常 运行 
exits.push ("north"); / /错误 ! exits 不 是 数组 
destinations.push(kitchen);  // 错 误 ! destinations 不 存在 


接口 实现 
addExit 仍然 正 常 exits 
运行 一 一 该 接口 未 改变 


— > addExit 


No 一 -一 > 


错误 : destinations 数 组 
不 存在 一 该 实现 已 改变 


图 11-3 如 果菜 实现 更 改 了 ， 依 赖 于 该 实现 的 代码 会 报错 


以 上 可 见 ， 通 过 全 局 变量 使 我 们 能 够 访问 程序 所 有 区 域 的 做 法 模糊 了 实现 和 接口 之 间 的 
界限 ， 赋 予 了 用 户 偷 宽 和 算 改 的 自由 ， 并 在 实现 的 细节 改变 时 导致 了 程序 的 崩 湿 。 


11.1.3 命名 冲突 


因为 程序 可 能 是 由 不 同 的 团队 或 程序 员 所 编写 的 代码 组 成 ， 所 以 很 可 能 在 多 个 地 方 使 用 
了 相同 的 变量 名 。 例 如 ， 一 个 程序 员 声 明 一 个 变量 名 称 spacer (一 个 格式 化 函数 的 命名 空 
间 )， 随 后 该 程序 中 的 另 一 个 程序 员 也 声明 了 一 个 相同 的 变量 名 称 spacer (一 个 基于 控制 台 
的 空间 冒险 游戏 中 的 犬 科 角 色 )， 第 二 个 变量 声明 就 会 禾 盖 第 一 个 变量 声明 一 一 发 生 冲 突 碰 
撞 ! 为 了 训 免 以 上 碰 接 ， 我 们 非常 需要 有 一 种 方法 能 够 保护 变量 免 于 彼此 窗 盖 (第 13 音 将 
更 详细 地 探讨 冲突 磁 撞 问题 )。 
11.1.4 ”难以 查找 的 错误 

代码 长 度 有 可 能 成 千 上 万 行 。 依 束 于 全 局 变量 的 程序 越 庞大 越 弱 不 禁 风 ， 因 为 对 全 局 变 
量 的 声明 可 能 是 在 程序 中 很 远 的 地 方 ， 并 且 在 整个 程序 中 这 些 全 局 变量 都 有 可 能 被 函数 和 指 
令 所 窥视 和 算 改 。 一 旦 程序 出 现 问题 〈 很 可 能 会 出 现 问题 )， 我 们 将 难以 跟踪 代码 的 流程 ， 
难以 锁定 问题 的 具体 位 置 。 


11.2 局 部 变量 的 优势 
在 函数 体内 声明 的 变量 无 法 在 该 函数 之 外 访问 ， 这 些 在 函数 体内 声明 的 变量 称 为 局 部 变 
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三 克 
时 。 


局 部 变量 只 在 声明 该 变量 的 函数 体内 局 部 发 挥 作用 (图 11-4)。 


console.1og (mountain) 


从 函数 外 面 


面 看 


(> 不 到 函数 内 部 


在 该 函数 之 外 ， 尚 未 声明 
mountain ， 因 此 不 能 访 
问 这 个 局 部 变量 。 错 误 ! 


图 11-4 在 函数 体内 声 


functrone Ont 


Var mountain = "Devils Tower" 


明 萨 


Pa 
和 
ba 


量 是 该 


函数 的 局 部 变量 


如 果 在 函数 之 外 访问 该 函数 的 局 部 变量 


量 就 会 报错 。 代 码 清单 11-4 欲 将 mountain 变量 的 


值 显示 到 控制 台 上 ， 但 是 只 会 得 到 以 下 报错 消息 : 
>ReferenceError: Can’t find variable: mountain 
不 同 浏览 器 可 能 会 显示 不 同 格 式 的 报错 信息 。 
代码 清单 1-4 ”在 控制 台 上 无 法 显示 的 变量 
(http://jsbin.com/bobilu/edit?js,console) 
var hide = function () { 
Var mountain = "Devils Tower"; 
和 // 在 函数 内 声明 mountain 变量 
console.1og (mountain) ;  // 和 尝试 在 该 函数 之 外 访问 mountain 变量 
在 所 有 函数 之 外 声明 的 变量 集合 称 为 全 局 范围 。 每 个 函数 创建 自己 的 局 部 范围 ， 即 局 部 
变量 集合 。 在 代码 清单 11-4 中 ， 变 量 mountain 不 在 函数 之 外 的 全 局 范围 中 ， 因 此 在 
console.log 语句 中 使 用 该 变量 时 会 报告 错误 。 
在 同一 范围 内 使 用 变量 就 不 会 产生 任何 麻烦 ， 见 以 下 代码 清单 11-5， 在 控制 台 上 可 
见 : 
>Devils Tower 
代码 清单 11-5 ”该 变量 在 函数 内 部 可 见 
My (http://jsbin.com/raluqu/edit?is,console) 
var show = function () { 
Var mountain = "Devils Tower",; 
console.1og (mountain) ; // 在 函数 体内 ， 将 mountain 变量 作为 一 个 参数 传递 给 
//console.logas 
ys 
Show() ; 
代码 清单 11-6 将 全 局 变量 和 局 部 变量 组 合 在 一 起 。 程 序 可 以 在 任何 地 方 访问 全 局 变 
量 ， 但 只 能 在 show 函数 内 部 使 用 局 部 变量 secretMountain， 在 控制 台 上 输出 如 下 信息 


>Ben Nevis 
>Devils Tower 


>Ben Nevis 
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>ReferenceError: Can’t find variable: secretMountain 


”代码 清单 11-6 全 局 变量 和 局 部 变量 
My (http://jsbin.com/riconi/edit?js,console) 


var mountain; // 声 明 全 局 变量 : mountain 和 show， 在 整个 程序 中 可 见 
var show; 
mountain = "Ben Nevis"; 


show = function () { 


var secretMountain= "Devils Tower"; // 声 明 一 个 局 部 变量 ，secretMountain， 
// 只 在 show 函数 中 可 见 

console.1og (mountain) ; // 使 用 mountain 变量 。 没 问题 ， 因 为 它 是 全 局 变量 。 

console.1og(secretMountain) // 使 用 secretMountain 变量 。 没 问题 ， 因 为 


// 在 同一 个 局 部 范围 内 
类 
show() ; // 调 用 show 功能 。 没 问题 ， 因 为 show 也 是 一 个 全 局 变量 。 
console.1og (mountain) ; // 使 用 mountain 变量 。 没 问题 ， 因 为 它 是 全 局 变量 。 
console.log(secretMountain) ; // 使 用 secretMountain 变量 。 错 误 ! 因为 它 不 在 全 
// 局 范围 内 


11.3 接口 一 一 控制 访问 权限 并 提供 可 用 功能 

我 们 希望 用 户 能 够 在 控制 台 上 与 程序 进行 交互 ， 但 是 不 希望 用 户 挖掘 程序 的 实现 并 对 程 
序 做 出 随意 更 改 。 向 用 户 开放 的 一 组 属性 和 操作 称 为 接口 。 下 面 我 们 就 学 习 如 何 提供 接口 ， 
同时 隐藏 其 他 内 容 。 

在 本 节 中 ， 我 们 会 使 用 一 个 非常 简单 的 计数 器 程序 。 在 第 11.4 节 中 ， 我 们 将 开发 一 个 
测验 应 用 程序 的 界面 。 在 11. 5 一 11.7 节 ， 我 们 将 所 学 内 容 应 用 于 游戏 The Crypt。 

以 下 代码 清单 是 计数 器 程序 的 第 一 个 版 本 ， 使 用 全 局 变量 保存 当前 计数 。 
入。 代码 清单 11-7 计数 器 
Wy (http://jsbin.com/yagese/edit?js,console) 


var counter = 0;  // 声 明 一 个 全 局 变量 counter， 并 赋值 
var count = function () { 


Counter = counter + 1; 
return counter; // 在 函数 内 访问 counter 


上 


Es 


运行 该 程序 ， 并 在 控制 台 提示 符 下 按照 下 列 步 又 操作 用 户 操 作 的 内 容 前 面 会 显示 提示 
符 >， 但 程序 响应 的 内 容 前 面 不 会 显示 提示 符 >)。 


>count () 
1 
>count () 
2 


>count () 
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以 随时 更 改 它 ， 如 下 所 示 : 


>Counte = 99 
99 
>count () 
100 
我 们 并 不 想 让 用 户 拥 有 像 这 样 的 权力 。 下 面 ， 


对 用 户 隐 藏 counter 变量 。 
11.3.1 使 用 一 个 函数 来 隐藏 变量 


针对 计数 器 应 用 程序 ， 我 们 希望 实现 以 下 两 个 
加 对 用 户 隐 藏 counter 变量 
图 对 用 户 开 放 count 函数 


程序 看 似 运 行 正常 ， 那 还 有 什么 问题 ?问题 在 于 counter 是 一 个 全 局 变量 ， 因 此 用 户 可 


将 使 用 11.2 节 中 所 介绍 的 局 部 变量 知识 


目标 : 


以 下 代码 清单 11-8 显示 了 一 个 解决 方案 ， 


>count () 
1 
>counter 


Can’t find variable: counter 


《再 次 提示 ， 您 收 到 的 错误 可 能 会 略 有 不 同 
些 信 息 。) 
> 


oe 


代码 清单 11-8 隐藏 counter 变量 
(http://jsbin.com/fuwuvi/edit?js,console) 


var getCounter = function () { 
Var counter = 0;，; 


var countUpByl = function (){ 


六 


运行 该 程序 ， 可 以 在 控制 台 上 看 到 以 下 


， 不 同 浏览 器 可 能 会 显示 不 同 格式 的 报 


// 在 getCcounter 函数 内 部 声明 一 个 局 部 变量 counter 
// 在 getcounter 里 面 ， 骨 套 定义 计数 函数 


//countUpBy1 


Counter = counter + 1; 


return COunter; 
return countUpBy1; 


var count = getCounter(); 


表 11-1 列 出 了 一 系列 问题 和 解决 方案 ， 
然 可 以 访问 局 部 变量 counter。 


对 
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// 返 回 该 计数 函数 ， 以 备 赋 值 


// 将 getcounter 返回 的 计数 函数 赋值 给 
//count 变量 ， 


以 备 后 用 


图 11-5 显示 返回 后 赋值 给 count 的 计数 函数 仍 
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表 11-1 计数 器 应 用 程序 的 问题 和 解决 方案 


问 题 解决 方案 
在 getCounter 函数 内 声明 counter 变量 。 作 为 局 部 变量 ， 用 户 不 能 
对 用 户 隐藏 counter 变量 访问 counter 
函数 countUpByl 的 功能 是 使 计数 器 递增 ， 它 需要 在 getCounter 函数 内 定义 countUpByl 函数 。 因 为 countUpByl 在 
访问 counter 变量 getCounter 里 面 ，countUpByl 可 以 访问 counter 变量 
希望 用 户 能 够 调用 计数 函数 从 getCounter 函数 返回 计数 函数 countUpBy1， 然 后 可 以 将 其 分 配 
给 一 个 全 局 变量 


count = getCounter ( ) 


functlion ( 
var counter = 0; counter 是 一 个 局 部 变量 
返 
var countUpPBYy1 = function () { 局 部 范围 内 定义 一 个 
counter = counter + 1; 计数 函数 。 它 可 以 访 . 
return counter; 问 counter 


return countUPBY1: 
返回 计数 函数 


coune Euneesom (7 
counter = counter + 1; 
return counter; 


p 计数 函数 仍然 可 以 


访问 counter 


图 11-5 返回 的 函数 仍然 可 以 访问 局 部 变量 counter 


通过 返回 一 个 函数 并 将 其 分 配给 count 变量 (图 11-5)， 我 们 为 用 户 提 供 了 一 种 使 用 该 
程序 的 方法 ;我们 给 用 户 提供 了 一 个 接 调用 getCounter0 来 获取 一 个 计数 函数 ， 然 后 
调用 count0 来 增加 计数 器 。 


11.3.2 ”使 用 getCount 创建 多 个 独立 计数 器 


在 以 上 代码 清单 11-8 中 ， 定 义 了 一 个 函数 getCounter 来 创建 计数 器 。 每 次 调用 
getCounter 时 ， 都 会 执行 以 下 三 个 步骤 : 

(1) 声明 一 个 counter 变量 并 赋值 为 0。 

(2) 定义 一 个 函数 进行 计数 ， 该 函数 使 用 步骤 (1) 中 的 counter 变量 

(3) 返回 计数 函数 。 

每 次 调用 getCounter 时 都 会 声明 一 个 counter 变量 并 定义 一 个 计数 函数 。 如 果 多 次 调用 
getCounter， 众 多 counter 变量 如 何 能 做 到 不 相互 干扰 ? 每 次 运行 getCounter 时 ， 都 会 创建 一 
个 新 的 局 部 范围 ， 我 们 得 到 的 是 counter 变量 的 多 个 副本 ， 每 个 变量 都 隔离 在 自己 的 变量 集 
合 中 ， 也 就 是 其 局 部 范围 内 。 

以 下 代码 清单 11-9 对 getCounter 代码 进行 了 更 新 ， 创 建 了 两 个 计数 器 ， 在 控制 台 上 交 
互 如 下 : 


ell 
o 


Ce 
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>climbCount ( ) 
工 
>climbCount () 
2 
>climbCount () 
3 
>peakCount () 
1 
>climbCount () 
4 


可 以 看 到 ，peakCount 和 climbCount 不 会 互相 干扰 。 
代码 清单 1-9 多 个 计数 器 


(http://jsbin.com/sicoce/edit?js,console) 


上 
六 
I 


var getCounter = function () { // 定 义 计数 函数 并 同时 返回 计数 结果 ， 不 需要 
var counter = 0; 
return function () { 
Counter = counter + 1; 


return counter; 


}; 


}s 


var peakCount = getCounter(); // 多 次 调 


] get Counter 以 创建 多 个 独立 的 计数 器 


Var climbCount = getCounter () ; 


可 见 ， 将 counter 定义 为 局 部 变量 就 可 以 拥有 多 个 独立 的 计数 器 。 


11.3.3 ”用 构造 胃 数 创建 多 个 独立 的 计数 器 


如 果 打 算 创 建 多 个 计数 器 ， 可 以 使 用 构造 函数 。 如 第 9 章 所 述 ， 构 造 图 数 简化 了 使 用 相 


似 属 性 和 方法 来 创建 对 象 的 过 程 。 使 用 new 关键 字 可 以 调用 构造 函数 ， 对 于 多 个 计数 器 ， 调 


月 


构造 函数 如 下 所 示 : 


var peaks = new Counter(); 


Var climbs = new Counter(); 


构造 函数 会 自动 创建 一 个 对 象 ， 并 将 该 对 象 分 配给 特殊 的 this 变量 ， 构 造 函数 还 会 返回 


该 对 象 。 我 们 可 以 将 计数 函数 设置 为 this 的 一 个 属性 ， 使 其 在 构造 函数 之 外 可 用 ， 详 见 以 下 
代码 清单 11-10。 在 控制 台 上 ， 可 以 如 下 调用 计数 函数 : 


>peaks .count () 


1 
>peaks.count () ; 
2 
>climbs.count () ; 
1 
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3 代码 清音 11-10 ”计数 器 构造 函数 
Me (http://jsbin.com/yidomap/edit?js,console) 


var Counter = function () { 


var Counter = 0; 


this.count = function () { // 将 计数 函数 指定 为 特殊 的 this 对 象 的 属性 


Counter = counter + 1; 
return counter; 
上 
}; 
var peaks = new Counter(); 


Var climbs = new Counter(); 


对 比 代 码 清单 11-9 和 11-10， 会 发 现 二 者 几乎 相同 。 唯 一 的 区 别 在 于 ， 在 代码 清 


单 11-10 中 ， 将 计数 函数 设置 为 this 的 属性 ， 而 不 是 返回 该 函数 。 构 造 函 数 自动 返回 


this 对 象 ， 所 以 不 需要 手动 去 做 。 构造 函数 依然 是 一 个 函数 ， 所 以 counter 依然 是 一 


个 局 


部 变量 。 以 上 两 种 方法 《使 用 普通 函数 和 使 用 构造 函数 ) 都 可 以 有 效 返 回 接口 并 隐藏 实 


现 的 细节 。 


以 上 计数 器 是 一 个 既 简单 又 说 明 问 题 的 好 例子 。 下 面 我 们 来 看 一 个 包含 更 多 互动 部 分 的 


程序 一 一 测验 应 用 程序 。 请 注意 ， 绝 对 不 允许 用 户 作弊 。 


11.4 创建 一 个 简单 的 测验 应 用 程序 


这 款 简 单 的 测验 应 用 程序 应 该 能 够 做 到 以 下 三 点 : 
(1) 在 控制 台 上 显示 问题 

(2) 在 控制 台 上 显示 当前 问题 页 的 答案 。 

(3) 移 到 问题 库 中 的 下 一 个 问题 。 

在 控制 台 上 进行 交互 的 模样 大 致 如 下 所 示 : 


>quiz.quizMe () 

What is the highest mountain in the world? 
>quiz.showMe () 

Qomolangma 

>quiz.next () 

Ok 

>quiz.quizMe () 

What is the highest mountain in Scotland? 


可 见 ， 通 过 使 用 三 个 函数 QuizMe、showMe 和 next 可 以 满足 该 应 用 程序 的 三 个 要 求 。 
另外 ， 我 们 还 需要 问题 和 答案 数组 以 及 一 个 变量 来 跟踪 哪 一 个 是 当前 问题 。 全 局 变量 (在 任 


何 函数 之 外 声明 的 变量 ) 处 于 全 局 命名 空间 中 。 为 了 避免 测验 变量 污染 全 局 命名 空间 ， 


可 以 


将 它们 设置 为 单个 对 象 的 各 个 属性 。 正 如 在 第 7 章 中 所 见 ， 可 以 使 用 单个 对 象 把 相关 多 个 变 


量 收集 到 一 起 ， 通 常 称 为 一 个 命名 空间 。 
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11.4.1 将 对 象 用 作 一 个 命名 空间 
这 款 应 用 程序 只 创建 唯一 的 全 局 变量 quiz， 所 有 其 他 变量 都 设置 为 quiz 对 象 的 各 个 属 
性 ， 如 代码 清单 11-11 所 示 。 问 题 和 答案 数组 如 下 所 示 : 


var quiz = { 
questions: [ 


{ 


question: "What is the highest mountain in the world?", 


answer: "Qomolangma'" 


}s 
然后 ， 可 以 通过 quiz.questions 访问 该 数组 。 请 注意 ， 数 组 索引 值 从 0 开始 ， 所 以 要 访 
问 第 一 个 问题 和 答案 对 象 ， 请 使 用 quiz.questions [0]。 要 获得 questions 数组 的 第 一 个 问题 和 
第 一 个 答案 ， 请 分 别 使 用 以 下 形式 : 


~ 


quiz.questions [0] .question; 


duiz.dquestions [0] .answer; 
使 用 qIndex 属性 来 跟踪 当前 问题 。 


代码 清单 11-11 ”改进 这 款 测验 应 用 程序 
1 (http://jsbin.com/tupoto/edit?js,console) 


var quiz = { / /创建 一 个 对 象 并 将 其 分 配给 quiz 变量 
questions: [ / /创建 一 个 数组 并 将 其 分 配给 quiz 对 象 的 questions 属性 
{ // 对 每 个 问题 和 答案 使 用 一 个 对 象 
question: " What is the highest mountain in the world?", 
// 为 数组 中 的 每 个 对 象 设置 一 个 question 属性 和 一 个 
//answer 属性 
answer: "Qomolangma'" 
}3 
{ 
question: "What is the highest mountain in Scotland?", 
answer: "Ben Nevis'" 
后 
{ 
question: "How many munros are in Scotland?", 
answer: "284" 
} 
], 
qIndex: 0, / /创建 一 个 qIndex 属性 来 跟踪 当前 的 问题 
quizMe: function () { // 使 用 quizMe 显示 当前 问题 
return quiz.questions [quiz.gqIndex] .question; 
}, 
showMe: function () { // 使 用 showMe 显示 当前 答案 
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return quiz.questions [quiz.gqIndex] .answer; 

}; 

next: function () { // 使 用 next 移动 到 下 一 个 问题 
quiz.gqIndex = gquiz.gqIndex + 1; 
return "OR"; 

} 


}; 
以 上 代码 清单 11-11 满足 了 上 述 应 用 程序 的 三 个 要 求 ， 并 | 


只 使 月 


quiz， 程 序 所 需要 
属于 quiz 命名 空间 。 
很 遗憾 ， 这 款 应 用 程序 还 不 能 克服 全 


全 部 变量 都 包括 在 quiz 对 象 内 ， 作 为 quiz 的 属性 来 访问 ， 


11.1.1 节 )。quiz 对 象 的 所 有 属 
数值 。 


11.4.2 ”隐藏 问题 数组 
在 以 上 代码 清单 11-11 中 ， 
就 有 可 能 恶作剧 ， 改 变 各 属性 ， 如 


下 所 示 : 


>quiz.qIndex = 300 


>quiz.questions[2] .answer = "282" 


部 变量 来 实现 上 述 目 的 ， 使 questions 数组 和 qIndex 的 值 变 为 私有 ， 如 图 


quiz = getQuiz ( ) 


function ( ) 


其 实 ， 我 们 希望 用 户 只 能 使 用 quiz.quizMe、quiz.showMe 和 quiz.next。 下 面 通 过 使 月 


11-6 所 示 。 


函数 定义 在 局 部 
内 , 接口 函数 可 以 访 


var qIndex = 0; qIndex 和 questions 
返回 值 替换 var questions = []; 是 局 部 变量 
函数 调 
return { ei 
quizMe: function 全 各 Ee 
showMe: function 世 且 
next: function () 问 qrndex 和 questions 
返回 接口 对 象 
quiz = { 
quizMe: function (tl 接口 函数 仍然 可 以 访问 
showMe: function () {}, aqIndex 和 auestions 
nexe runetnionn 
J 
图 11-6 使 用 局 部 变量 使 Index 和 questions 变 为 私有 


以 下 代码 清单 11-12 
qlIndex 的 值 。 


隐藏 信 ， 


日 了 一 个 全 局 变量 
因此 它们 全 都 


uy 


6 


局 变量 的 一 个 缺陷 : 所 有 区 域 均 可 访问 《参见 第 
性 都 是 公开 的 一 一 用 户 仍然 可 以 窃取 最 高 分 并 修改 所 有 


户 可 以 在 控制 台 上 访问 quiz 对 象 的 所 有 属性 。 这 样 ， 他 们 


局 


中 使 用 getQuiz 函数 创建 一 个 局 部 范围 ， 用 于 隐藏 questions 数组 和 
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代码 清单 1-12 ”隐藏 问题 和 答案 
WE (http:/jsbin.com/qahedu/edit2js,console) 


var getQuiz =function () { / /使 用 一 个 函数 创建 局 部 作用 域 


Var qIndex = 0; // 在 函数 内 部 声明 局 部 变量 

var questions = [ 
question: " What is the highest mountain in the world?", 
answer: "Qomolangma'" 
question: "What is the highest mountain in Scotland?", 
answer: "Ben Nevis'" 
question: "How many munros are in Scotland?", 
answer: "284" 

站 

return { // 返 回 一 个 对 象 ， 该 对 象 具 有 用 户 可 以 访问 的 属性 


quizMe :function () { 
return questions [qIndex] .question; 


showMe :function () { 


return questions [qIndex] .answer; 


next :function () { 
gqIindex = gqIindex + 1; 
return "Ok"; 


J 
1 


var quiz = getQuiz();  ”// 调 用 函数 ， 将 返回 的 对 象 分 配给 quiz 变量 


该 程序 返回 一 个 对 象 ， 该 对 象 具有 三 个 属性 : quizMe、showMe 和 next。 在 程序 的 最 后 


一 行 ， 将 返回 的 对 象 分 配给 quiz 变量 ， 用 户 可 以 使 用 quiz 访问 这 三 个 函数 : 


>quiz.quizMe () 


What is the highest mountain in the world? 


>quiz.answer () 


Qomolangma 


我 们 将 能 够 使 上 述 测验 应 用 程序 工作 的 代码 称 为 该 程 


村 


口 对 象 的 方法 。 用 户 无 法 访问 qIndex 和 questions 变量 ， 因 


164 


六 的 实现 ， 通 过 使 用 局 部 变量 可 以 
将 某 些 实现 隐藏 在 getQuiz 函数 中 。 该 函数 返回 的 对 象 为 用 户 提供 了 一 个 接口 ， 接 口 是 一 种 


用 户 与 程序 公开 交互 的 方式 。 用 户 可 以 调用 quizMe、showMe 和 next 函数 ， 因 为 它们 都 是 接 


为 它们 都 是 getQuiz 函数 内 的 局 音 


第 11 章 作用 域 : 隐藏 信息 


变量 。 
11-7 显示 了 用 户 在 JS Bin 控制 台 提 示 符 下 尝试 访问 变量 gIndex 和 questions 时 ， 系 统 
报错 的 界面 ( 因 浏 览 嚣 不同， 错误 提示 信息 可 能 略 有 不 同 )。 


JavaScript Console QOutput [ee | Account Blog Help 
Console Run Clear 
》qIndex 


X "Can't find variable: qIndex" 
》 questions[90] 


X "Can't find variable: questions" 


图 11-7 在 控制 台 上 访问 qIndex 和 questions 会 导致 错误 


11.5 The Crypt 一 一 隐藏 玩家 信息 


在 11.5 一 11.7 节 中 ， 我 们 将 更 新 The Crypt 代码 ， 隐 藏 一 部 分 变量 、 属 性 和 函数 ， 这 些 
隐藏 的 内 容 属于 该 程序 的 实现 ， 是 程序 开发 者 不 愿意 开 的 部 分 ， 同时 ， 也 会 考虑 该 
程序 的 接口 应 该 采取 什么 形式 向 玩家 和 其 他 程序 员 公 


11.5.1 当前 的 Player 构造 函数 一 -全 部 内 容 都 公开 
到 目前 为 止 ， 我 们 还 没有 控制 用 户 对 Player 对 象 中 数据 的 访问 。 以 下 代码 清单 显示 了 
Player 构造 函数 的 当前 形式 。 


3 代码 清单 11-13 Player 构造 函数 
加 (http://jsbin.com/dacedu/edit?js,console) 


var spacer = { /* 在 JS Bin 上 可 见 */ }; 
Var Player = function (name, health) { 
Var newLine = spacer.newLine(); 
this.name = name; // 在 this 对 象 上 设置 属性 使 所 有 数据 可 用 
this.health = health; 
this.items = []; 


this.place = null; 
this.addItem = function (item) { .. };// 在 this 对 象 上 设置 属性 使 所 有 方法 可 用 


this.getNameInfo = function () { ... }; 
this.getHealthIinfo = function () { . }; 
this.getPlaceInfo = function () { ... }; 
this.getItemsInfo = function () { ... }; 
this.getInfo = function (character) { .. }; 
this.showInfo = function (character) { ... }; 


二 
我 们 将 所 有 玩家 数据 和 所 有 函数 都 设置 为 特殊 的 this 对 象 的 属性 。 当 使 用 new 关键 字 调 
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用 Player 构造 函数 时 ，Player 构造 函 
函数 来 创建 一 个 新 玩家 : 


Var playerl1 = newPlayer 


了 所 有 内 容 ， 


移 霹 函数 自动 返回 this 对 象 ， 并 将 该 对 象 分 配给 


数 会 自动 创建 this 对 象 。 


("Jahver", 80); 


playerl 变量 。 因 


以 下 语句 就 是 调 


用 Player 构造 


为 在 构造 函数 中 已 经 包含 
返回 并 分 配给 player1， 现 在 就 可 以 使 用 playerl 来 访问 该 对 象 的 数据 和 方法 ， 例 如 


playerl. name、 playerl. items、 playerl. addItem、 playerl. getInfo 和 playerl. showImfo 。 


11.5.2 ”更 新 版 的 Player 构造 本 

为 了 控 表 
直 的 做 法 。 函 数 定义 中 医 
局 部 变量 ， 可 以 在 该 函数 体内 的 人 


一 


Sy 


亲 


var Player = function 


用 户 对 玩家 数据 的 访问 ， 


E 何 地 方 使 用 ， 但 


(name, 
// name 和 health 都 是 局 部 变量 


数 一 一 某 些 变量 被 隐藏 


可 以 使 用 参数 和 变量 ， 而 放弃 
括号 内 的 参数 与 函数 体内 声明 的 变量 作用 域 相 同 ， 都 是 该 函数 内 的 


health) { 


// name 和 health 在 这 里 


可 以 使 用 


this.getHealthInfo = 


// name 和 health 在 这 里 可 L 


和 
}; 
// name 和 health 在 这 里 不 能 使 用 
// 这 里 是 player 函数 体 之 外 的 


图 11-8 显示 了 两 个 版 本 的 Player 构造 函数 ， 旧 版 对 应 代码 清单 11-13， 新 版 对 应 代码 清 
性 在 函数 体外 是 否 可 见 。 新 版 Player 构造 函数 隐藏 
分 配给 特殊 的 this 对 象 。 


单 11-14， 二 者 的 变化 在 于 一 些 变量 和 属 


了 局 部 作用 域 


的 大 多 数 函 数 ， 仅 将 4 个 函数 作为 接口 


function () { 


使 用 


区 域 


[== 


local variables 


newLine 


不 能 在 该 函数 之 外 访问 。 


local variables 


newLine 
Local variables are private name health 
Properties of this are public items place 
this 
getNameInfo getHealthInfo 
name health 
getTitleInfo getItemsInfo 
items place 
getIinfo 
getNameInfo getHealthIinfo 
getPlaceInfo getItemsInfo 网 
getIinfo 
setPlace getPlace 
addItem showInfo addItem showInfo 


Old Player constructor 
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将 一 些 变 量 和 


New Player constructor 


函数 隐藏 在 构造 函数 的 局 部 作用 域内 


上 述 为 this 对 象 属性 赋 
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以 下 代码 清单 11-8 显示 了 在 新 版 代码 中 的 更 新 部 分 ， 使 用 var 声明 的 局 部 变量 阻止 玩 
家 对 数据 的 直接 访问 。 


代码 清单 1-14 在 构造 函数 中 隐藏 玩家 信息 
(http://jisbin.com/fuyaca/edit?js,console) 


var spacer = { /* 在 JS Bin 上 可 见 */ }; 
var Player = function (name, health) { // 在 this 对 象 上 设置 属性 使 所 有 方法 可 用 
Var newLine = spacer.newLine(); 


TT 


var items = []; 

Var place = null; 

var getNameInfo = function () {// 将 这 些 函 数 私 有 化 以 供 内 部 使 用 
return name; 


}; 

var getHealthIinfo = function () { 
return "(" + health + ")"; 

}; 

Var getIitemsInfo = function () { 
var itemsString = "Items:" + newLine; 
items.forEach (function (item, i) { 

itemsString += " - " + item + newLine,; 

]) ; 
return itemsString; 

var getTitleInfo = function () { // 将 这 些 函 数 私 有 化 一 一 以 供 内 部 使 用 
return getNameInfo() + " " + getHealthIinfo(); 


}; 
var getInfo = function () { 
Var info = spacer.box (getTitleInfo(), 40, "*"); 
info += " " + getItemsInfo(); 
info += spacer.line(40, "*"); 
info += newLine; 
return info; 
}; 
this.addItem = function (item) { 
items.push (item); 
this.setPlace = function (destination) { // 添 加 方法 来 管理 对 Place 变量 的 访问 


place = destination; 


this.getPlace = function () { 
return place; 
this.showInfo = function (character) { 


console.log(getIinfo(character)); 


}; 
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从 以 上 代码 可 见 ， 我 们 把 不 希望 在 构造 函数 之 外 看 到 的 属性 和 函数 分 配给 局 部 变量 ， 把 


希望 在 构造 函数 之 外 看 到 的 方法 分 配给 this 对 象 的 属性 。 
var items = []; // 私有 化 
this.showInfo = function () { }; // 公开 化 


以 上 代码 中 ，setPlace 和 getPlace 方法 可 以 让 
用 户 访问 place 变量 ， 为 何 要 使 用 一 个 变量 来 使 其 私有 ? 
一 个 接口 ， 同 时 可 以 让 开发 者 将 程序 实现 隐藏 起 来 ， 


用 户 访问 place 变量 。 既 然 这 两 个 方法 允许 


并 可 以 使 开发 者 对 用 户 的 访问 有 所 调 


因为 采用 这 种 方式 可 以 为 用 户 提 供 


控 : 当 调 用 setPlace 方法 ， 将 destination 参数 分 配给 place 变量 之 前 ， 可 以 先 检查 destination 


参数 是 否 为 有 效 位 置 ， 当 调用 getPlace 方法 ， 在 返 
访问 。 目 前 我 们 尚未 将 这 两 项 额外 的 检查 落实 到 位 ， 但 是 当 


这 两 种 方法 就 会 


以 上 代码 中 ， 
具有 自己 的 showlInfo 方法 ， 


现在 ， 当 用 户 在 控 


立刻 派 上 用 场 。 


制 台 上 查看 玩家 信息 时 ， 


器 该 地 点 之 前 ， 可 以 检查 该 用 户 是 否 有 权 


日 后 需要 添加 任何 检查 条 件 时 ， 


火炎 火炎 火炎 火炎 大火 大 大 火炎 大 大 大 大 火炎 大 大 大 大 火炎 大 大 大 大 大 大 大 大 大 大 火炎 大 大 


* Kandra (50) 


炎炎 火炎 火炎 炎炎 火炎 炎炎 炎炎 火炎 火炎 火炎 火炎 炎炎 火炎 火炎 炎炎 火炎 炎炎 大火 火炎 火炎 


Items: 


-The Sword of Doom 


炎炎 火炎 炎炎 炎炎 火炎 炎炎 炎炎 火炎 炎炎 火炎 火炎 炎炎 火炎 炎炎 炎炎 火炎 炎炎 炎炎 火炎 炎炎 


大 


在 玩家 名 字 后 面 的 括号 中 显示 了 玩家 的 健 月 
以 调用 getPlace 来 检索 place 对 象 ， 然 后 调用 place 对 象 的 showInfo 方法 : 


通过 使 用 showImfo 简化 了 对 信息 的 显示 ， 不 再 显示 当前 位 置 。Place 对 象 
因此 无 需 将 已 经 包含 在 玩家 信息 内 的 地 点 详情 再 次 重复 显示 。 
会 发 现 内 容 减少 了 ， 如 下 所 示 : 


Var Place = player.getpPlace(); 


place. 


showInfo(); 


11.6 The Crypt—— 隐藏 地 点 信 言 息 


本 贡 中 对 Place 构造 函数 所 做 的 更 新 与 11.5 节 


EE 值 。 如 有 果 需 要 显示 玩家 当前 的 位 置信 息 ， 可 


PF 对 Player 构造 函数 所 做 的 更 新 完全 相 


同 ， 隐 藏 某 些 数据 并 提供 按 需 访问 的 方法 。 以 下 代码 清单 11-15 与 第 10 章 中 的 Place 构造 函 


数 的 结构 相同 ， 


更 新 之 处 是 在 this 对 象 上 设置 了 数据 和 方法 


代码 清单 11-15 ”Place 构造 函数 
yy (http:/jsbin.com/kavane/edit2jsyconsole) 


var spacer = { /* 


var newLine = 


this.title = title; // 使 用 


在 Js Bin 上 可 见 */ }; 


var Place = function 


(title, description) 


spacer.newLine(); 


this.description = 


this.items = [ 
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] 


descrip 


重 
[ES 


Ea 


tion; 


{ 


性 来 保存 地 点 数 ] 


o 


this.exits = {}; 


this.getItemsInfo = function () { }; // 创 建 函 数 来 构建 信息 字符 串 
this.getExitsInfo = function () { }; 

this.getTitleInfo = function () { }; 

this.getInfo = function () { }; 

this.showInfo = function () { }; // 创 建 函 数 来 更 新 并 显示 地 点 数据 


this.addItem = function (item) { }; 
this.addExit = function (direction, exit) { }; 


}s 


以 下 代码 清单 11-16 是 更 新 版 的 Place 构造 函数 : 使 用 参数 和 变量 来 隐藏 数据 ， 一 个 新 
的 getExit 函数 返回 指定 方 同 目的 地 ， 还 有 一 个 新 的 getLastItem 方法 从 items 数组 返回 最 后 
一 项 元 素 。 


和 3》 ”代码 清单 11-16 在 构造 函数 中 隐藏 地 点 信息 
1 (http:/jsbin.comy/riviga/edit2js,console) 


var spacer = { /* 在 JS Bin 上 可 见 */ }; 
var Place = function (title, description) {  // 使 用 参数 和 var 关键 字 创 建 私 


// 有 变量 
Var newLine = spacer.newLine(); 
var items = []; 
var exits = {}; 
var getItemsInfo = function () { // 将 这 些 国 数 私有 化 ， 仅 供 内 部 使 用 
Var itemsSstring = "Items: " + newLine; 


items.forEach (function (item) { 
itemsString += " - " + item; 
itemsString += newLine; 
站 有 
return itemsString; 


}; 


var getExitsInfo = function () { 
var exitsString = "Exitsfrom " + title; 
exitsString += ":" + newLine; 


Object .keys (exits) .forEach (function (key) { 
exitsString += " - "+ key; 
exitsString += newLine; 
}ys 
return exitsString; 
var getTitleInfo = function () { 
return spacer.box(title, title.length + 4, "="); 
var getInfo = function () { 
Var infoString = getTitleInfo(); 


infoString += description; 
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infoSstring += 
infoString += getIitemsInfo() 
infoString += getExitsInfo(),; 
infoString += spacer.line(40, 
return infoString; 

}; 
this.showInfo = function () { 
console.log(getIinfo()); 


J 


newLine + newLine; 


+ newLine; 


"=") + newLine; 


this.addItem = function (item) { 
items.push (item); 

this.addExit = function (direction, exit) { 
exits[direction] = exit; 


this.getExit = 

return exits[direction]; 

this.getLastItem = function () { 
return items.pop(); 


function (direction) { // 添 加 一 


// 添 加 一 
// 取 最 后 一 项 元 素 


以 上 代码 中 ， 
方法 ( 即 接口 ) ， 这 些 方法 通过 
只 能 使 用 接口 中 的 方法 ， 如 果 殿 


this 对 象 可 见 。 该 程 
他 程序 员 在 他 们 的 冒 


使 用 Player 和 Place 构造 函数 隐藏 ] 


到 中 ， 
险 游戏 程序 中 使 用 本 程序 ， 


接口 中 的 方法 。 
那些 在 控制 台 上 输入 
中 窃 喜 。 现 在 我 们 完全 可 以 阻止 他 们 的 这 种 过 失 # 
游戏 的 乐趣 。 我 们 只 给 玩家 提供 一 小 寺 
适合 本 游戏 的 动作 。 


11.7 The Crypt 一 一 用 户 交 互 


在 第 10 章 


命令 的 玩家 ， 无 意 中 发 现 自己 竟然 能 够 修改 一 些 习 


简单 的 行动 ， 


J 为 《说 作 浆 


例如 探险 、 收 集 、 猛 击 和 摧毁 等 


个 公共 方法 来 访问 目的 地 


个 公共 方法 从 items 数组 中 获 


某 些 属性 和 函数 ， 同 时 制作 了 一 小 套 
以 上 两 个 构造 函数 之 外 的 其 他 部 分 
也 只 能 使 用 


E 要 的 值 ， 难 免 心 
么 就 太 难 昕 了 )， 从 而 也 能 保持 


系列 


， 我 们 已 经 创建 了 游戏 The Crypt 的 工作 版 本 ， 可 以 让 玩家 从 一 个 地 方 移动 


ie 然后 拾 起 他 们 发 现 的 物品 ， 遗 憾 之 处 在 于 程序 中 使 用 的 全 局 变量 污染 了 全 局 


命名 空间 。 当 然 ， 我 们 也 不 必 过 于 愧 恼 ， 
方法 来 解决 问题 : 对 用 户 隐 藏 程序 的 实现 。 
以 下 代码 清单 11-17 显示 了 程序 实现 的 概要 ， 
的 版 本 几乎 相同 ， 不 同 之 处 在 于 使 用 了 getPlace 和 
数 中 的 getExit 和 getLastItem 地 点 方法 。 
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完整 版 本 在 JS Bin 上 可 见 。 它 与 第 


那 时 只 是 年 少 无 知 。 在 本 章 ， 我 们 学 会 了 一 种 新 的 


10 章 


setPlace 玩家 方法 以 及 本 章 更 新 版 构造 函 


更 新 部 分 的 代码 如 下 所 示 。 


入 11 证 

> 代码 清单 1-17 游戏 包含 很 多 全 局 变量 
MW (http:/jsbin.com/dateqe/edit2js,console) 

// spacer 命名 空间 

var spacer = { /* 格式 化 函数 */ }; 

// 构造 函数 

var Player = function (name, healthn) { ... }; 

var Place = function (title, description) { .. }; 


// 游戏 控制 函数 


var render = function () { 


console.clear ();，; 
player.getPplace() .showInfo() ; 
player.showInfo(); 

二 

Var go = function (direction) { 


Var place = player.getplace(); 


人 三 


var destination = place.getExit (direction); 


player.setPplace (destination); 
render () ; 
eturn. Ls 

1 

var get = function () { 
Var place = player.getplace()，; 
Var item = place.getLastItem(); 
player.addIitem(item); 
render () ; 
Eeturn Vs; 

外 

// 地 图 


var kitchen = newPlace ("The Kitchen", 
var library = newPlace("The Old Library", 


kitchen.addIitem("a piece of cheese") ; 


library.addIitem("a rusty key"); 
kitchen.addExit ("south", library); 
library.addExit ("north", kitchen); 


// 游戏 初始 化 


Var player = newPlayer ("Kandra", 50); 


player.addIitem("The Sword of Doom"); 
player.setPplace (kitchen),; 


render () ; 


请 注意 ， 我 们 在 程序 中 使 用 的 全 局 变量 : spacer 
函数 、 游 戏 控制 函数 、 所 有 的 地 点 和 玩家 ， 以 上 这 些 


曙 


命名 空间 、Player 构造 函数 、Place 构造 


- 立 - 


作用 域 : 


变量 都 是 在 区 


隐藏 信息 


"You are in a kitchen..."); 


"You are in a library.."); 


函数 体 之 外 进行 赋值 的 。 这 


样 ， 全 局 污染 就 实在 太 严 重 了 ， 简 直 是 臭 气囊 天 ! 在 上 述 所 有 变量 ， 


控制 函数 go 和 get 提供 给 玩家 ， 其 他 部 分 都 可 以 隐藏 。 


?9 


实 我 们 


只 需 将 游戏 


171 


193 


11.7.1 接口 一 一 go 和 get 


目前 ， 用 户 只 需要 以 下 两 项 操作 : 


// 回 当前 位 置 的 北方 移动 
// 从 当前 位 置 拾取 一 个 物品 


game .go ("north"),; 


game .get () ; 


首先 ， 我 们 需要 隐藏 程序 的 实现 ， 可 以 将 该 游戏 代码 包 训 在 一 个 函数 内 。 其 次 ， 为 了 授 
权 用 户 进行 上 述 两 项 操作 ， 使 用 两 个 方法 从 函数 返回 一 个 接口 对 象 : 


机 


return { 
go: function (direction) { 


// 移动 到 一 个 新 地 点 


}, 
get: function () { 
// 拾取 一 个 物品 
} 
好 


以 上 接口 方法 通过 使 用 player 和 place 对 象 功能 来 实现 ， 这 两 个 对 象 ! 


11.7.2 ”隐藏 程序 的 实现 
为 了 隐藏 程序 的 实现 ， 程 序 只 返回 接 


对 象 ， 把 其 余 需 要 对 月 


它们 各 目的 构造 


数 中 ， 以 创建 局 部 作用 域 。 以 下 代码 清单 11-18 突出 显示 了 更 新 部 分 ， 
可 见 。 
< 


代码 清单 11-18 ”让 用 户 通 过 一 个 接口 对 象 与 游戏 交互 
(http://jsbin.com/yuporu/edit?js,console) 


-个 函数 


{ /将 实现 包 夺 在 


var getGame =function () 


户 隐 藏 的 代码 都 包 庄 在 函 
完整 代码 在 JS Bin 上 


中 以 创建 局 部 作用 域 


Playet 构造 函数 和 Place 构造 函数 


"You are in a kitchen..."); 


var spacer = { ... }; // 包 括 spacer、 

var Player = function (name, health) { .. }; 

var Place = function (title, description) { ... }; 
var render = function () { . };// 包 括 更 新 控制 台 的 函数 
var kitchen = newPplace ("The Kitchen", 

var library = newPlace("The Old Library", "Y 


kitchen.addIitem("a piece of cheese"),， 
library.addIitem("a rusty key"); 

kitchen.addExit ("south", 
library.addExit ("north", 


library); 
kitchen); 
50); 


var player = newPplayer ("Kandra", 


ou are in a library.."); 


/ /创建 一 个 玩家 〔 它 是 局 部 的 )， 


// 并 给 他 一 个 始 发 地 点 
P1Layer.addItem("The Sword of Doom'" ) ; 
player.setPplace (Kitchen) ; 
zendqez () ; // 在 控制 台 上 显示 初始 信息 
return {  // 返 回 一 个 对 象 作为 接口 ， 玩 家 可 以 访问 其 方法 


172 


go: 


function 


(direction) 


{ 


第 11 章 


Var place = player.getplace(); 


var destination = place.getExit (direction); 


player.setplace (destination); 


render () ; 


return ™™; 


}， 


get: 


function () { 


Var place = player.getplace(); 


Var item = place.getLastIitem(); 


player.addItem(item); 


render () ; 


return "07 


}; 
) 


var game = 


getGame (); 


以 上 代码 的 最 后 一 条 语句 调 


// 调 


] getGame 函数 ， 返 回 接 


口 对 象 ， 并 将 其 分 配给 game 变量 


] getGame 函数 ， 运 行 该 函数 然后 返回 一 个 接 


作用 域 : 隐藏 信息 


对 象 ， 该 对 


象 具 有 go 和 get 方法 ， 这 条 语句 将 该 接口 对 象 分 配给 game 变量 。 玩 家 可 以 通过 game 变量 
加 圆 点 运算 符 来 访问 go 和 get 方法 ， 如 下 所 示 : 


从 以 上 代码 可 


game .get () ; 


game .go ("east"),，; 


少 在 本 章 算是 大 功 告 成 了 ! 


如 上 例 所 示 ， 


见 ， 玩 家 无 法 访问 游戏 中 的 任何 


I 


他 变量 或 函数 。 我 们 的 


目标 实现 了 ， 至 


在 返回 接口 对 象 的 函数 中 打包 代码 的 过 程 〈 简 称 打包 -返回 过 程 )， 我 们 称 


之 为 模块 模式 。 在 编程 实践 中 ， 我 们 常常 将 接口 与 实现 分 离开 来 ， 代 码 打 包 有 助 于 提高 代码 


的 可 移植 性 和 习 


看 到 很 多 使 用 


在 第 12 章 学习 如 何 
一 下 ， 做 做 Further Adventures 


11.8 ”本 章 小 结 


国 减少 程序 中 全 局 变量 的 数量 。 全 
在 程序 中 的 任何 地 方 访问 全 局 变量 ， 
实现 ， 会 引起 命名 ; 


HTML 5 


EE 用 性 。 在 后 续 章节 中 ， 读 者 还 会 看 到 很 多 模块 模式 的 代码 ， 尤 其 在 第 13 


FP 的 script 标签 导入 模块 的 示例 。 在 学 习 第 13 章 内 容 之 前 ， 请 
做 决定 。If: 如 果 你 准备 好 了 ， 请 继续 阅读 ，else: 否则 ， 请 先 休 息 放 松 
FP 的 小 练习 ， 然 后 穿 好 盔甲 ， 整 装 待 发 。 


ZS 


局 变 


量 是 指 加 


E 所 有 函数 之 外 声明 的 变量 ， 


我 们 可 以 


但 这 样 做 会 污染 全 局 命名 空间 ， 会 暴露 程序 的 


' 突 ， 还 会 导致 程序 中 的 错误 难以 发 现 : 


Var myGlobal = "Lookatme"; 


Var useGlobal = 


function () { 


console.log('"I can see the global: 


} 


console.log('"I too can see the global: 


" + myGlobal); 


" + myGlobal); 
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国 将 相关 变量 和 函数 收集 在 一 起 作为 某 一 单个 对 象 的 各 个 属性 ， 可 以 减少 全 局 变量 的 
数量 。 这 样 的 对 象 通常 称 为 命名 空间 : 


var singleGlobal = { 
method1 : function () { … }, 
method2 : function () { ...} 


}; 
图 将 代码 包 囊 在 函数 中 以 创建 局 部 作用 域 ， 即 局 部 变量 的 集合 : 


了 


var getGame = function () { 
var myLocal = "A local scope, for local people."; 


console.log (myLocal) ; // 显示 信息 


}3 


console.1log (myLocal); // 错误 ! 此 处 myLocal 未 声明 
// 它 不 在 全 局 作用 域 
图 将 代码 包 于 在 函数 中 可 以 使 变量 私有 化 ， 可 以 隐藏 实现 ， 可 以 避免 命名 冲突 ， 还 可 
以 降低 错误 难以 发 现 的 风险 。 
国 从 消 数 返回 一 个 公共 接口 ， 可 以 清楚 地 授权 用 户 可 以 访问 的 属性 和 方法 (模块 
模式 )。 
国 返回 单个 函数 : 


var getCounter = function () { 


var counter = 0; // 私有 
return function () { ... }; 


二 


var Count = getCounter(); 


国 返回 一 个 对 象 : 
var getGame = function () { 
// 游戏 的 实现 
return { 


// 接口 的 方法 
3 
}; 
Var game = getGame () ; 


国 请 记 住 ， 构 造 函 数 如 同 任何 其 他 函数 一 样 可 以 创建 局 部 作用 域 ， 并 自动 返回 一 个 特 
殊 的 this 变量 作为 公共 接口 : 


var Counter = function () { 
var counter = 0; // 私有 
this.count = function () { … }; 


和 


174 


第 12 章 条 件 : 有 选择 地 运行 代码 


本 章 内 容 包 括 : 

使 用 比较 运算 符 

检查 条 件 是 真 (true ) 还 是 假 (false ) 
满足 条 件 时 运行 代码 
else 子 句 当 条 件 不 满足 时 运行 代码 
确保 用 户 输入 的 数据 不 会 破坏 程序 代码 
使 用 Math.randomO 生 成 随机 数 


到 目前 为 止 ， 我 们 编写 的 所 有 代码 都 遵循 单一 运行 路 径 ， 当 调用 函数 时 ， 函 数 体 中 的 每 
II 虽然 我 们 已 经 成 功 地 完成 了 很 多 工作 ， 也 掌握 了 JavaScript 的 很 多 
核心 概念 ， 但 是 我 们 编写 的 程序 还 缺乏 灵活 性 ， 不 能 有 选择 地 执行 某 些 代码 块 。 

在 本 剖 中 ， 读 者 将 学 习 如 何 运行 那些 满足 指 定 条 件 的 程序 人 代码。 这样， 程序 就 拥有 了 
分 文 执行 的 能 力 ， 为 程序 提供 了 选择 性 、 灵 活性 和 丰富 性 。 在 水 果 忍 者 游戏 中 ， 如 果 玩 家 
切 审 了 一 个 金 椰 ， 就 可 以 得 分 ; 在 The Crypt 游戏 中 ， 如 果 用 户 指定 了 一 个 有 效 的 方向 ， 
就 可 以 移动 到 新 位 置 ， 在 微 博 中 ， 如 果 用 户 的 帖子 长 度 少 于 141 个 字符 ， 就 可 以 将 该 文 发 
布 到 微 博 上 。 

如 果 想 知道 程序 如 何 做 出 决定 ， 请 继续 读 下 去 ， 因 为 下 面 的 内 容 真 的 很 有 用 ! 


12.1 有 条 件 地 执行 代码 


首先 ， 我 们 来 创建 一 个 简单 程序 ， 请 用 户 猜 出 密码 数字 。 如 果 猜 测 正 
“Well done !”， 在 控制 台 上 的 交互 如 下 所 示 : 


外， 程序 就 会 输出 


si 


>guess (2) 
undefined 
>guess (8) 
Well done! 
undefined 


在 控制 台 上 怎么 出 现 了 讨厌 的 undefined? 当 用 户 在 控制 台 上 调用 函数 时 ， 将 执行 该 函 
数 体 的 代码 ， 并 显示 返回 值 。 但 是 在 代码 清单 12-1 中 ， 因 为 guess 函数 中 没有 包含 一 条 可 以 
返回 值 的 语句 ， 因 此 该 函数 就 自动 返回 了 undefined。 
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代码 清单 12-1 猜 数 字 
(http://jsbin.com/feholi/edit?js,console) 


var secret = 8; // 将 一 个 数字 赋值 给 secret 变量 
var guess=function (userNumber) { // 定 义 一 个 函数 来 接收 用 户 输入 的 数字 并 将 该 数 
// 字 分 配给 guess 变量 

if (userNumber ===secret) { / /判断 用 户 输入 的 数字 是 否 与 密码 数字 匹配 
console.10g ("Well done!") ;// 如 果 这 两 个 数字 匹配 ， 则 在 控制 全 上 输出 “Well gdone! ” 


}; 

在 以 上 代码 中 ，guess 函数 检查 用 户 输入 的 数字 是 否 与 密码 数字 相等 。guess 函数 使 用 了 
严格 相等 运算 符 === 和 if 语句 ， 只 有 在 数字 完全 匹配 时 才 显 示 “Well done!” 消 息 。 下 面 将 
详细 描述 严格 相等 运算 符 和 证 语句， 并 介绍 else 子 句 。 

12.1.1 严格 相等 运算 符 


严格 相等 运算 符 (===) 用 于 比较 两 个 值 。 如 果 二 者 相等 ， 则 返回 true; 如 果 二 者 不 相 
等 ， 则 返回 和 alse。 读 者 可 以 在 控制 台 上 进行 测试 : 


>2 === 

false 

>8 === 

true 

>8 === "8" 
false 

> "8" === "8" 


True 
在 以 上 第 三 个 例子 中 ， 可 以 看 到 严格 相等 运算 符 判 断 数 字 8 和 字符 串 “8” 是 不 相等 
的 ， 这 是 因为 数字 和 字符 串 是 两 种 类 型 的 数据 。 而 true 和 false 是 第 三 种 数据 类 型 ， 称 为 布 
尔 值 。 事 实 上 ， 布 尔 值 只 有 true 和 false， 无 其 他 。 在 决定 程序 下 一 步 应 该 做 什么 时 ， 我 们 党 
常 使 用 布尔 值 ， 例 如 下 一 节 的 站 语 句 。 
12.1.2 并 语句 
使 用 站 语句 意味 着 只 有 当 指 定 条 件 满足 时 才能 执行 代码 块 ， 如 下 所 示 : 


if (条 件 ) { 
// 需要 执行 的 代码 


} 


如 果 圆 括号 中 的 条 件 为 真 (true)， 那 么 JavaScript 执行 花 插 号 之 间 的 代码 块 语句 。 如 果 
条 件 为 假 (false)， 那 么 JavaScript 跳 过 该 代码 块 。 请 注意 ， 在 让 语句 表示 结尾 的 花 括 号 后 面 
没有 分 号 。 

代码 清单 12-1 使 用 严格 相等 运算 符 返 回 一 个 true 或 false 值 。 
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if (userNumber === secret) { 
console.log ("Well done!™"); 


} 


在 以 上 代码 中 ， 只 有 当 用 户 输 入 的 值 userNumber 等 于 secret 的 值 时 ， 才 会 将 “Well 
done!” 消 息 输出 到 控制 台 上 。 例 如 ，secret 的 值 是 8， 用 户 输入 的 值 是 2。 


UD 


if (2 === 8) // 这 个 条 件 是 false 
console.log ("Well done!"); / /这 条 语句 不 会 执行 


} 
如 果 用 户 输 入 8, 那么 让 语句 就 变 成 : 


if (8 === 8) { // 这 个 条 件 是 true 
console.log ("Well done!"); // 这 条 语句 会 执行 


12.1.3 ”else 子 句 

在 12.1.2 节 中 ， 我 们 学 习 了 if 语句 ， 如 果 条 件 为 false， 那 么 JavaScript 会 跳 过 该 代码 
块 。 但 是 有 些 时 候 ， 如 果 让 语句 中 条 件 的 值 为 false， 还 需要 执行 不 同 的 代码 ， 则 可 以 通过 在 
让 语句 中 附加 一 个 else 子 句 来 实现 (图 12-1)。 


true 
> Well done! 
if (userNumber === secret) { 
console.log("Well done!"); 
执行 哪些 代码 取 
} else { userNumber === secret 决 于 条 件 的 值 是 
= 
fal 
console.log ("Unlucky, try again."); true 还 是 false 
| 
> Unlucky, try again . 
false 


图 12-1 使 用 这 和 else， 根 据 条 件 的 值 来 执行 不 同 代码 
以 下 代码 来 自 代码 清单 12-2: 


if (userNumber === secret) { 
console.log ("Welldone!™"); 

} else { 
console.log ("Unlucky, try again."); 


} 
如 果 userNumber 和 secret 相等 ，JavaScript 将 显示 “Well done !”; 否则 ， 显 示 
“Unlucky，try again”。 请 注意 ， 在 else 子 句 表示 结尾 的 花 括号 后 面 没 有 分 号 。 例 如 ，secret 
的 值 为 8， 用 户 输 入 的 值 是 2: 


LE (2 == 8) // 条 件 的 值 是 false 
console.log ("Well done!"); / /不 执行 该 语句 
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} else { 
console.10g ("Unlucky，try again."); // 执 行 该 语句 
} 


如 果 用 户 输 入 的 值 是 8: 
if (8 === 8) 1 // 条 件 的 值 是 true 
console.log ("Well done!"); // 执 行 该 语句 
} else { 
console.log ("Unlucky，try again."); // 不 执行 该 语句 


这 个 猜 密码 数字 的 游戏 在 探 各 


} 


| 台 上 交互 如 下 : 


>guess (2) 

Unlucky, try again. 
undefined 

>guess (8) 

Well done! 
undefined 


代码 清单 12-2 ” 猿 数 字 一 一 else 子 句 
(http://jsbin.com/nakosi/edit?js,console) 


Var secret = 8; 
var guess = function (userNumber) { 
if (userNumber === secret) { // 添 加 一 个 证 语句 ， 在 圆 括 号 中 加 入 判断 条 件 
console.1og("Well qdone!"); // 仅 当 条 件 为 上 true 时 执行 此 代码 
} else { // 当 条 件 是 false 时 添加 else 子 句 
console.log ("Unlucky，try again.");  // 仅 当 条 件 为 false 时 才 执 行 此 代码 


到 


}; 


下 面 ， 我 们 学 习 如 何 使 用 局 部 变量 存放 密码 数字 。 


12.1.4 


隐藏 函数 中 的 密码 数字 


在 代码 清单 12-2 中 ，secret 和 guess 变量 声明 在 任何 函数 之 外 。 我 们 在 第 11 章 中 已 经 
学 过 ， 这 样 做 就 意味 着 它们 是 全 局 变量 ， 任何 人 无 从 在 控制 台 上 还 是 在 整个 程序 中 都 可 以 访 


问 它们 。 这 样 做 对 guess 来 说 是 非常 好 也 
secret 来 说 却 是 一 个 灾难 一 一 用 户 可 以 随意 密 视 和 修改 它 的 值 。 如 果 运 行 代码 清单 12-2， 用 


门 就 是 希望 用 户 能 够 猜测 数字 ;但 是 ， 对 


户 就 可 以 在 控制 全 上 执行 下 列 操作 : 
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>secret // 可 以 访问 secret， 因 为 它 是 一 个 全 局 变 ] 
8 

>guess (8) 

Well done! 

Undefined 

>secret = 20 // 可 以 将 secret 


| 四 
tun 


置 为 任何 值 


20 
>guess (20) 
Well done! 
Undefined 
用 户 居然 可 以 随意 设置 secret 的 值 ! 显然 ， 这 已 经 不 再 是 一 个 猜 数 字 的 游戏 了 。 
在 本 书 第 11 章 ， 讨 论 了 如 何在 JavaScript 中 使 用 函数 来 创建 局 部 作用 域 ， 即 上 只 有 在 函数 
内 才能 访问 的 变量 集合 。 在 代码 清单 12-3 中 ， 我 们 使 用 getGuesser 函数 来 隐藏 密码 数字 ， 
并 将 getGuesser 函数 的 返回 值 分 配给 guess 变量 (图 12-2 )。 
guess 是 一 个 全 局 变量 ， 可 以 供用 户 在 控制 台 上 访问 : 


>guess (2) 
Unlucky, try again 
Undefined 


guess = getGuesser ( ) 


function ( ) 
Ex | secret 是 一 
Var secret = 8; 个 局 部 变量 
返回 值 替换 return function (userNumber) { 
本 让 局 名 作用 如 由衣 
console.log("We e160- 时光 六 ; 可 函数 ， 因此 该 返回 函 
} else { 数 可 以 访问 secret 
console.log ("Unlucky, try again."); 
} 
I 
函数 返 区 
guess = function (userNumber) { 
if (userNumber === secret) { 
console.log("Well done!"); 
} else { 
console. log ("Unlucky, try again-™)s 
} 返回 函数 仍然 可 以 
1 访问 secret 
图 12-2 将 getGuesser 函数 的 返回 值 分 配给 guess 变量 
代码 清单 12-3 ” 猜 数 字 一 一 使 用 局 部 作用 域 
= . . . . 和 
Wy (http://jsbin.com/hotife/edit?js,console) 
var getGuesser = function () { // 使 用 函数 创建 局 部 作用 域 
Var secret = 8; // 将 密码 数字 隐藏 在 局 部 作用 域内 
return function (userNumber) { // 返 回 一 个 用 户 可 以 使 用 的 函数 来 猜 数 字 
if (userNumber === secret) { // 判 断 用 户 的 猜测 是 否 与 密码 数字 相同 
console.1log("Well done!"); // 只 有 数字 匹配 时 才 输 出 "Well done!" 
} else { 
console.1log ("Unlucky,try again."); //… 和 否则 得 出 "Unlucky,try again" 
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}; 
var Guess = getOuesser()y // 调 用 getGuesser 并 将 返回 函数 分 配给 guess 变量 


在 以 上 代码 中 ， 分 配给 getGuesser 的 函数 创建 了 一 个 局 部 作用 域 ， 将 secret 变量 置 于 其 
中 ， 用 户 无 权 访 问 。 该 函数 返回 了 另 一 个 让 用 户 猜 密码 数字 的 函数 ， 并 分 配给 guess 变量 。 
因为 猜 密 码 数字 函数 是 在 getGuesser 函数 创建 的 局 部 作用 域 中 定义 的 ， 所 以 猜 密 码 数字 函数 
可 以 访问 secret 变量 并 且 能 够 进行 密码 猜测 。 

以 上 代码 已 经 可 以 称 得 上 是 一 球 简 单 的 猜谜 游戏 了 ， 但 是 仅 限 于 猜 中 那个 一 成 不 变 的 密 
码 数字 ， 实 在 是 不 太 好 玩 ! 下 面 ， 我 们 使 用 JavaScript 的 Math 命名 空间 中 的 几 个 方法 ， 为 
猜谜 游戏 添加 一 些 额外 的 神秘 色彩 ! 


12.2 利用 Math.randomO 生 成 随机 数 


Math 命名 空间 为 我 们 提供 了 一 种 可 以 生成 随机 数 的 方法 ， 该 方法 返回 一 个 大 于 或 等 于 0 
且 小 于 1 的 数字 。 在 控制 台 的 提示 符 后 输入 Math.random()， 得 到 了 以 下 随机 数字 : 

>Math.random() 

0.7265986735001206 

>Math.random() 

0.07281153951771557 

>Math.random() 

0.552000432042405 


I 


显然 ， 这 些 密码 数字 是 各 不 相同 的 ， 因 为 它们 是 随机 的 。 除 非 你 真 的 热衷 于 玩 猜谜 游 
戏 ， 并 且 有 很 多 空间 时 间 ， 否 则 要 猜 中 这 些 随 机 数字 可 能 是 太 难 了 。 

我 们 需要 将 这 些 密码 数字 改良 一 下 ， 把 它们 缩放 到 我 们 想 要 的 范围 内 ， 然 后 将 它们 转换 
为 整数 。 因 为 最 初 它们 的 初始 值 都 小 于 1， 所 以 乘 以 10 将 使 它们 变 成 小 于 10 的 随机 数 。 请 
看 下 面 儿 条 Math.random 的 赋值 语句 : 


Var number = Math.random(); // 0<= number<l1 


要 缩放 这 些 数 字 ， 请 使 用 乘法 运算 : 


var number = Math.random() * 10; // 0<= number<10 
要 增 大 或 缩小 这 些 数 字 ， 请 使 用 加 法 或 减法 : 

Var number = Math.random() + 1; // 1<= number<2 
先 乘除 后 加 减 : 

Var number = Math.random() * 10 + 1; // 1<= number<11 


以 上 最 后 一 次 赋值 得 到 的 数字 应 该 在 1 和 11 之 间 ， 可 以 等 于 1， 但 小 于 11。<= 符 号 表 
示 小 于 或 等 于 ， 而 < 符号 则 表示 小 于 。 不 等 式 0<= number<1 表示 数字 在 0 和 1 之 间 ， 可 以 等 
于 0， 但 不 能 为 1( 见 第 12.3.1 节 )。 
通过 上 述 语 句 ， 我 们 已 经 把 随机 数 放 大 了 ， 但 是 它们 在 控制 台 上 的 模样 看 上 去 并 不 理想 : 
180 


>Math.random() * 10 + 工 
3.2726867394521832 
>Math.random() * 10 + 1 

9.840337357949466 


下 一 步 ， 我 们 要 去 掉 每 个 数字 的 小 数 部 分 ， 将 以 上 数字 取 整 为 整数 。 因 此 ， 需 要 使 用 
Math 命名 空间 的 floor 方法 ， 如 下 所 示 ; 


>Math.floor(3.2726867394521832) 
3 
>Math.floor(9.840337357949466) 
9 


使 用 floor 方法 ， 无 论 小 数 部 分 是 什么 ， 总 是 向 下 售 入 。 例 如 10.00001、10.2、10.5、 
10.8 和 10.99999 都 向 下 舍 入 为 10。 下 面 ， 我 们 使 用 floor 生成 一 个 表达 式 ， 返 回 一 个 1 到 10 
之 间 的 随机 整数 (包括 1 和 10): 


Var number = Math.random() * 10 + 1 // 1<= number<1l1 
var number = Math.floor (Math.random() * 10 + 1) // 1<= number<= 10 


与 以 上 floor 方法 相对 应 ，Math.ceil 方法 总 是 向 上 舍 入 。 男 外 ， 还 有 Math.round 方法 ， 
可 以 向 上 或 向 下 舍 入 ， 二 者 都 遵循 通常 的 数学 舍 入 规则 。 有 关 JavaScript 中 Math 对 象 的 更 
多 内 容 ， 请 参阅 本 书 网 站 http://www.room51.co.uk/js/math.html。 

代码 清单 12-4 将 Math 方法 付 诸 实践 。 现 在 guess 函数 返回 字符 串 而 不 输出 这 些 字符 
串 ， 控 制 台 自动 显示 返回 值 ， 交 互 如 下 : 


>guess (2) 


Unlucky, try again. 
>guess (8) 

Unlucky, try again. 
>guess (7) 

Well done! 


代码 清单 12-4 ” 猜 随 机 数 
(http://isbin.com/mezowa/edit?js,console) 


var getGuesser = function () { 
Var secret = Math.floor(Math.random() * 10 + 1); 
// 使 用 Math.random 和 Math.floor 生成 1 到 10 之 间 的 整数 


return function (userNumber) { 


if (userNumber === secret){  // 仅 当 条 件 为 true 时 ， 才 使 用 if 语句 执行 命令 
return "Well done!"; // 当 调用 函数 时 ， 返 回 值 将 显示 在 控制 台 上 
} else { // 包 含 一 个 else 子 句 ， 如 果 条 件 为 false， 则 执行 该 命令 


return "Unlucky, try again.™; 


}; 
}; 
Var guess = getGuesser ()} // 调 用 getGuesser 函数 并 将 返回 函数 分 配给 guess 变量 [205 
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使 用 随机 数 使 这 球 猜 密 码 游戏 变 得 更 加 有 趣 ， 但 是 该 游戏 目前 还 只 是 简 


没有 涉及 任何 猜谜 策略 。 下 面 ， 我 们 将 进一步 改进 这 款 游戏 ， 在 用 户 每 次 猜测 


反馈 。 


12.3 ”使 用 else if 创造 更 多 条 件 


如 果 用 户 在 每 次 猜测 后 都 能 得 到 反馈 ， 他 们 就 可 以 在 玩 游 戏 的 过 程 中 不 断 改进 ， 找 到 更 


有 效 的 猿 迹 策略。 通常 来 讲 ， 策 略 游戏 比 猿 密码 游戏 更 加 有 趣 。 如 果 用 户 的 猜测 不 正确 ， 
告诉 他 们 是 猿 得 太 高 还 是 猜 得 太 低 了 ， 如 下 所 示 : 
>guess (2) 
Too low! 
>guess (7) 
Too high! 
>guess (5) 
Well done! 
图 12-3 显示 了 针对 三 种 用 户 反馈 的 不 同 条 件 。 
true 
> Well done! 
true 
userNumber === secret > Too high! 
userNumber > secret 
false 
> Too low! 
false 
图 12-3 条件 嵌 套 可 以 提供 多 个 选项 
在 以 下 代码 清单 12-$ 中 ， 使 用 了 两 个 让 语句 来 区 分 两 种 类 型 的 错误 答案 。 
代码 清单 12-$ 用户 的 猜测 太 高 或 太 低 
yy http:/jsbin.com/cixeju/edit?js,console) 
Var getGuesser = function () { 
Var secret = Math.floor(Math.random() * 10 + 1); 
return function (userNumber) { 
if (userNumber === secret){ // 使 用 条 件 来 判断 用 户 是 否 猜 到 了 密码 
return "Well done!™",; 
} else { / /如果 猿 测 不 正确 ， 则 执行 第 一 个 else 子 句 
if (userNumber>secret) { // 检 查 用 户 猜 测 的 密码 是 否 大 于 密码 数字 


return "Too high!"; 
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} else { // 用 户 猜 测 的 密码 不 大 于 密码 数字 
return "Too low!™"; 


} 


}; 
}; 


var guess = getGuesser (); 


如 果 让 语句 花 括 号 内 的 代码 块 只 包含 一 条 语句 ， 这 个 花 括号 可 以 省 咯 。 请 看 以 下 三 个 代 
码 段 ， 三 者 是 等 效 的 : 


if (userNumber === secret) { 
return "Well done!™; 
} 


if (userNumber === secret) 


return "Well donel!™; 


if (userName === secret) return "Well donel!™"; 


伴随 代码 的 与 时 俱 进 和 不 断 更 新 ，if 和 else 子 句 会 变 得 越 来 越 复杂 。 这 时 ， 如 果 省 略 花 
括号 ， 就 可 能 很 难 识别 哪些 语句 与 哪些 子 句 是 一 起 配套 使 用 的 。 许 多 程序 员 ， 也 包括 我 本 
人 ， 建 议 读者 还 是 不 要 轻易 省 略 花 括号 (除了 购 套 的 if 语句 ， 稍 后 讲解 )。 当 然 ， 也 有 一 些 
程序 员 并 不 这 么 严格 要 求 ， 因 此 是 否 省 略 花 括号 可 以 归结 为 个 人 (或 团队 〉 喜好 。 本 书 采 用 
读者 最 容易 理解 的 方式 来 使 用 花 括 号 。 

针对 每 一 条 于 语句 ， 即 使 只 带 有 一 个 else 子 句 ， 也 会 被 当 作 一 条 语句 。 当 else 子 句 包含 
单个 让 语句 时 ， 通 常会 省 略 花 括号 。 以 下 三 个 代码 段 是 等 效 的 : 

首先 ， 如 代码 清单 12-5 所 示 ， 髓 套 的 if-else 语句 位 于 一 对 花 括 号 内 ， 如 下 所 示 : 


else { // 起 始 花 括号 


if (userNumber>secret) { 


return "Too hign!"; 


} else { 


return "Too low!™"; 
} 
} // 结束 花 括号 
其 次 ， 内 部 的 正 else 是 单个 语句 ， 因 此 不 需要 用 花 括 号 ， 如 下 所 示 : 


else // 没有 花 括号 


if (userNumber>secret) { 


return "Too hignh!"; 


} else { 


return "Too low!™"; 
} 
// 没有 花 括 号 


最 后 ， 因 为 JavaScript 基本 上 忽略 空格 符 和 制 表 符 ， 所 以 内 部 的 felse 语句 可 以 移动 到 
初始 的 else 子 名 后面， 如 下 所 示 : 
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else if (userNumber>secret) { // if 移动 到 else 的 后 面 
return "Too high!"; 

} else { 
return "Too low!™; 


} 
在 上 述 三 个 代码 段 中 ， 最 后 一 种 版 本 是 最 常见 的 格式 。 以 下 代码 清单 12-6 显示 了 上 文 
中 重新 排序 的 else-if 代码 块 。 
代码 清单 12-6 ”重新 排序 的 else-if 代码 块 


(http://jsbin.com/cidoru/edit?js,console) 


var getGuesser = function () { 
Var secret = Math.floor(Math.random() * 10 + 1); 
return function (userNumber) { 
if (userNumber === secret) { 


return "Well done!"; 
} else if (userNumber>secret) { 

return "Too high!"; 

} else { 
return "Too low!"; 

} 

}; 
}; 


Var guess = getGuesser () ; 


为 了 与 代码 清单 12-5 进行 比较 ， 代 码 清 单 12-6 中 的 第 二 个 证 语句 用 粗 体 显示 。 程 序 员 
删除 了 第 一 个 else 代码 块 的 花 括号 ， 并 将 第 二 个 证 语句 移动 到 第 一 个 else 的 旁边 。 代 码 清单 
12-6 是 编写 else- 让 块 的 最 常用 方法 。 但 是 如 果 读 者 个 人 偏爱 代码 清单 12-5 中 那个 较 长 的 版 
本 ， 当 然 可 以 坚持 自己 的 选择 ， 没 有 哪个 代码 法 官 可 以 宣判 你 滥用 语法 罪 。 

在 上 述 猜 密 码 数字 的 游戏 中 ， 所 有 可 能 的 输出 结果 只 有 三 种 : 正确 、 太 高 或 太 低 。 也 
就 是 说 ， 如 果 用 户 的 猜测 不 正确 ， 并 且 也 不 是 太 高 ， 那 么 一 定 是 太 低 。 


12.3.1 ”比较 运算 符 


以 上 代码 清单 12-5 和 12-6 中 都 使 用 了 大 于 运算 符 >， 该 运算 符 用 于 比较 两 个 值 ， 其 运算 
结果 是 true 或 false。 表 12-1 列 出 一 些 用 于 比较 两 个 值 的 运算 符 ， 大 于 运算 符 只 是 其 中 之 一 。 
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表 12-1 比较 运算 符 


操作 符 名 称 举例 运算 结果 
5>3 true 
> 大 于 3>10 false 
727 false 
5>=3 true 
2 大 于 或 等 于 3>= 10 false 
Te 7 true 
5<3 false 
< 小 于 3<10 true 
7<7 false 
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( 续 ) 
操作 符 名 称 举例 运算 结果 

5<=3 false 

<= 小 于 或 等 于 3<= 10 true 

7<= 7 true 

5===3 false 

= 三 = 严格 相等 7===7 true 

7==="7" false 

51==3 true 

1-- 不 严格 相等 了 Is false 

了 true 
表 12-1 中 所 有 运算 符 的 运算 结果 都 是 true 或 false， 所 以 可 以 在 让 语句 的 条 件 中 使 用 这 
些 运算 符 。 读 者 也 许 想 知道 “严格 相等 运算 符 ” 中 的 “严格 ”到 底 意味 着 什么 ， 是 否 还 有 一 


个 与 之 对 应 的 “ 非 严 格 ”版 本 。 这 种 疑惑 不 无 道理 ， 对 于 “ 非 严格 ”版 本 的 相等 ， 程 序 中 可 
以 使 用 “==” 运 算 符 ， 请 参阅 以 下 “普通 相等 和 强制 转换 ”补充 解释 栏 。 
普通 相等 和 强制 转换 

和 不 克 让 吉 韦 作 全 本 此 相生 而 不 位 区 机 和 开放 机 月 遇 类 二 证 的 二 和 大吉 关 吉 代 
值 进行 比较 ， 得 到 二 者 相等 的 结果 。 

强制 转换 是 将 值 从 一 种 类 型 转换 为 另 一 种 类 型 的 过 程 ， 例 如 ， 从 字符 串 转 换 为 数字 。 

因此 ， 严 格 比较 7 ===“7” 的 结果 为 false， 因 为 一 个 值 是 数字 ， 而 另 一 个 值 是 字符 
串 。 普 通 比 较 7 == “7” 的 计算 结果 为 true， 因 为 字符 串 首先 被 强制 转换 为 数字 ， 然 后 7 
==7 的 结果 就 是 true。 

强制 转换 的 规则 超出 了 本 书 的 范围 (尽管 有 人 认为 它们 根本 不 值得 一 学 )， 我 们 在 本 
市 中 将 坚持 运用 严格 比较 ， 


显然 ， 经 过 改进 的 猜 数 字 密 码 游戏 已 经 变 得 非常 有 趣 。 下 面 我 们 继续 改进 以 前 设计 的 那 
款 测验 应 用 程序 ， 为 其 增加 一 个 检查 答案 的 功能 。 


12.4 在 测验 应 用 程序 中 检查 答案 


既然 可 以 通过 让 语句 中 的 条 件 来 判断 对 错 ， 在 测验 结束 时 就 可 以 输出 用 户 在 该 测验 程序 
中 答对 间 题 的 分 数 ， 在 控制 台 上 的 交互 如 下 所 示 : 


>quiz.quizMe () 


What is the highest mountain in the world? 
>quiz.submit ("Qomolangma") 

Correct! 

Your score is 1 out of 1 

>quiz.quizMe () 

What is the highest mountain in Scotland? 
>quiz.submit ("Snowdon") 

No, the answer is Ben Nevis 

You have finished the quiz 

Your score is 1 out of 2 


该 测验 程序 的 代码 在 以 下 代码 清单 12-7 中 显示 。getQuiz 函数 包含 了 该 测验 的 程序 
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并 返回 一 个 带 有 quizMe 和 submit 方法 的 接口 对 象 ， 请 读者 查看 该 代码 清单 的 运 


”代码 清单 12-7 检查 测验 的 答案 
加 (http://jsbin.com/hidogo/edit?js,console) 


var getQuiz = function () { 


var score = 0, // 使 用 单个 var 关键 字 声 明 getouiz 函数 中 的 所 有 变量 


qIndex = 0， 
inPlay = true, 
questions, 
next, 
getQuestion, 
checkAnswer, 
submit; 
questions = [ 
{ 
question: "What is the highest mountain in the world?", 
answer: "Qomolangma" 
}, 
{ 
question: "What is the highest mountain in Scotland?", 


answer: "Ben Nevis" 


]; 
getQuestion = function () { // 定 义 getQuestion 方法 以 返回 当前 提问 的 问题 
if (inPlay) { 


return questions[lgqIndex] .question; 
} else { 


return "You have finished the quiz."; 
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next = function() {  // 定 义 next 方法 来 移动 到 下 一 个 问题 ， 并 检查 问题 是 否 结束 
dqIndex = gqIindex + 1; 


if (gqgIndex>= questions.lengtn) { 
inPlay = false; 


console.log("You have finished the quiz."); 


}; 
checkAnswer = function (userAnswer) { // 定 义 checkAnswer 方法 以 检查 答案 


// 是 否 正 确 并 更 新 分 数 
if (userAnswer === questions[qIndex] .answer) { 
console.log("Correct!"); 
Score = score + 1; 
} else { 
console.log("No, the answer is " + questions[qIndex] .answer); 
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}; 


submit = function (userAnswer) { // 定 义 submit 方法 来 处 理 用 户 提 交 的 答案 


var message = "You have finished the quiz."; 
if£ (inplay) { 
checkAnswer (userAnswer); 


next () 


message = "Your Score is "+ Score + " outof " + gqIndex; 


} 


return message; 


}; 
return { // 返 回 带 有 quizMe 和 submit 方法 的 接口 对 象 


quizMe: getQuestion, 


submit: submit 
}; 
}; 


var quiz = getQuiz();  // 调 用 getQuiz 函数 并 将 返回 的 接口 对 象 分 配给 quiz 变量 


这 个 新 的 测验 程序 由 多 个 可 拆 分 部 件 组 成 ， 下 面 将 对 其 进行 分 解 。 
12.4.1 变量 的 便捷 声明 方式 : 使 用 var 关键 字 声 明 多 个 变量 
在 本 节 内 容 之 前 ， 我 们 每 次 声明 一 个 变量 都 要 使 用 一 次 var 关键 字 : 


Var score; 
Var getQuestion; 
Var next; 


Var submit; 


隔 ， 最 后 用 分 号 来 结束 。 因 此 ， 上 述 4 个 变量 声明 可 以 改写 为 以 下 形式 : 


Var Scorey 
getQuestion, 
next, 


submit; 


还 可 以 将 需要 声明 的 变量 写 在 同一 行 代码 中 ， 如 下 所 示 : 


Var Score getQuestion, next, submit; 


不 过 ， 大 多 数 程序 员 喜 欢 每 行 具 写 一 个 变量 。 另 外 ， 在 使 用 一 个 var 关键 字 声明 多 个 变 


量 的 过 程 中 还 可 以 加 入 赋值 


var score = 0， 


getQuestion, 


submit = function (userAnswer) { 


件 : 有 选择 地 运行 代码 


其 实 ，JavaScript 允许 使 用 一 个 var 关键 字 同时 声明 多 个 变量 ， 各 个 变量 之 问 用 逗号 分 


[We 
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这 种 便捷 的 变量 声明 方式 ， 目 的 在 于 确保 所 有 变量 都 得 以 声明 ， 而 且 代 码 更 易于 阅读 和 
理解 。 我 本 人 偏爱 代码 清单 12-7 中 的 风格 ， 感 觉 它 更 易于 阅读 ， 而 且 还 能 少 打 一 些 字 。 有 
些 程序 员 确实 喜欢 在 声明 每 一 个 变量 时 都 使 用 var 关键 字 ， 且 单独 一 行 ， 就 像 本 书 前 面 章节 
中 一 样 ， 这 种 做 法 为 将 来 剪 切 和 粘贴 变量 提供 了 方便 。 其 实 我 们 没 必 要 操心 别人 的 做 法 有 什 
么 优点 ， 随 着 时 间 的 推移 ， 每 个 程序 员 都 会 逐渐 形成 自己 的 风格 。 


12.4.2 ”显示 测验 中 的 问题 


在 以 上 代码 清单 12-7 中 ，getQuestion 函数 从 questions 数组 中 获得 一 个 测验 问题 ， 使 用 
qIndex 变量 从 数组 中 选取 当前 的 问答 对 象 ， 并 返回 问答 对 象 的 question 属性 ， 如 下 所 示 : 


YH 


. 


return questions[lgqIndex] .question; 


只 有 在 测验 进行 过 程 中 ， 该 函数 才 会 返回 测验 问题 ， 否 则 ， 将 返回 一 个 字符 串 来 说 明 测 
验 结束 ， 如 下 所 示 : 


return "You have finished the quiz."; 
该 程序 使 用 inPlay 变量 来 标记 测验 正在 进行 中 还 是 已 经 完成 。 当 测验 正在 进行 时 ， 
inPlay 变量 的 值 为 tue; 当 测 验 结束 时 该 变量 的 值 为 false。getQuestion 函数 将 inPlay 变量 上 
于 和 语句 中 的 条 人 


CLL 


让 
“0 


if (inplay) { 
return questions[lgqIndex] .question; 
} else { 
return "You have finished the quiz."; 


} 


当 inPlay 为 true 时 ， 函 数 返 回 的 是 测验 的 问题 ， 当 inPlay 为 false 时 ， 函 数 返 回 的 是 字 
符 串 消息 (请 注意 .在 控制 台 上 的 提示 符 处 调用 一 个 函数 时 ， 控 制 台 会 自动 显示 返 


12.4.3 移 至 下 一 道 题 日 


在 以 上 代码 清单 12-7 中 ， 调 用 next 函数 ， 从 一 道 题 上 日 移动 到 下 一 道 题目 ， 具 体 实现 方 
式 是 变量 qIndex 的 递增 ， 如 下 所 示 : 


dqIndex = qiIndex + 1; 


该 程序 将 questions 数组 中 当前 元 素 的 索引 值 存储 在 变量 qIndex 中 。 请 注意 ， 数 组 索引 
值 是 从 零 开始 的 ， 因 此 对 于 长 度 为 4 的 数组 ， 索 引 值 分 别 为 0，1，2，3。 索 引 值 如 果 为 4， 
就 会 超出 数组 的 末尾 〈3 是 该 数组 的 最 后 一 个 索引 值 )。 一 般 来 说 ， 如 果 索 引 值 大 于 或 等 于 数 
组 的 长 度 ， 就 会 超过 数组 的 末尾 。 所 有 的 数组 都 有 一 个 length 属性 。 在 测验 程序 中 ，length 
属性 代表 问题 的 数量 。 

在 以 下 语句 中 ，next 函数 在 检查 当前 元 素 的 索引 值 是 否 超过 了 最 后 一 个 问题 的 索引 值 : 


if (gqIndex >= questions.length) 


如 果 索 引 值 超过 了 数组 的 末尾 ， 说 明 所 有 的 问题 都 


马 
TH 


二 
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inPlay 赋值 为 false， 如 下 所 示 : 


if (gqgIndex>= questions.lengtn) { 
inPlay = false; 
console.log ("You have finished the quiz."); 


12.4.4 ”检查 用 户 的 答案 
在 以 上 代码 清单 12-7 中 ， 使 用 了 checkAnswer 函数 。 如 果 用 户 提 交 的 答案 与 来 自问 题 
数组 的 当前 答案 完全 相同 ， 玩 家 的 得 分 就 会 增加 1 分， 否则 ， 显 示 正 确 的 答案 ， 如 下 所 示 : 


if (userAnswer === questions[qIndex] .answer) { 
console.log ("Correct!");} 
score = score + 1; 

} else { 


console.log ("No, the answer is " + questions[qIndex] .answer); 


12.4.5 ”处 理 用 户 的 答案 
在 以 上 代码 清单 12-7 中 ， 当 玩家 提交 答案 后 ， 用 submit 函数 来 编排 程序 的 后 续 进 程 
该 函数 的 返回 值 为 以 下 两 种 情况 之 一 : 用 户 的 得 分 或 者 提示 测验 已 结束 的 消息 ， 如 下 所 示 : 


Your score is 1 out of 2 // 如 果 inPlay 的 值 是 true 
You have finished the quiz. // 如 果 inPlay 的 值 是 false 
如 果 测 验 仍 在 进行 当中 ，submit 将 调用 另外 两 个 函数 : checkAnswer 和 next， 每 个 函数 
都 将 按 顺 序 执行 其 代码 。 我 们 可 以 看 到 ， 程 序 正 在 按照 需要 依次 运行 代码 ， 如 下 所 示 : 


if (inPlay) { 
checkAnswer (userAnswer);} 


next () 
message = "Your Score is "+ Score + " outof " + gqIndex; 


12.4.6 ”返回 接口 对 象 
在 以 上 代码 清单 12-7 中 ，getQuiz 返回 的 接口 对 象 比较 简单 ， 它 并 没有 自己 的 实现 代 
但 ， 而 是 从 getQuiz 的 局 部 作用 域内 得 到 两 个 函数 的 赋值 作为 其 属性 ， 如 下 所 示 : 


return { 
quizMe: getQuestion, 
submit: submit 


}; 
正如 第 11 章 所 述 ， 接 口 对 象 有 助 于 保持 一 个 始终 不 变 的 接口 ， 即 使 getQuiz 中 的 功能 实 
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现 被 更 改 ， 用 户 依 然 可 以 调用 quiz.quizMe0 和 quiz.submitO0。 用 户 可 以 更 改 以 . 


上 赋值 给 接口 


对 象 属性 的 两 个 函数 以 及 这 些 函 数 的 工作 方式 ， 但 是 干 万 不 要 删除 或 重新 命名 这 两 个 属性 。 
请 读者 仔细 体会 程序 如 何 通过 代码 片段 进行 分 工 ， 这 些 片 段 又 是 如 何 协同 工作 


瑟 


字 的 整体 功能 。 程 序 员 在 编写 程序 时 ， 有 一 个 贯穿 始终 的 目标 ， 代 码 容 易 阅读 ， 并 
解 。 认 语句 及 其 else 子 句 确实 有 助 于 程序 员 实现 上 述 目标 ， 使 用 这 些 语句 可 以 清晰 地 杭 理 各 


序 的 流程 


明 确 


程序 在 每 个 节点 所 采取 的 适当 操作 。 


下 面 ， 我 们 将 把 这 些 新 的 概念 应 用 到 游戏 The Crypt 中 去 。 


12.S The Crypt 


检查 用 户 的 输入 


在 第 11 章 中 ， 我 们 创建 了 一 个 getGame 函数 ， 为 The Crypt 返回 一 个 公共 接口 


过 调用 从 getGame 返回 的 go 方法 就 可 以 从 一 个 地 方 移动 到 另 一 个 地 方 ， 通 过 调用 从 


getGame 返 


回 的 get 方法 就 可 以 拾取 物品 ， 如 下 所 示 ; 
return { 
go: function (direction) { 


}; 


}, 


Var Place = player.getPlace(); 


var destination = place.getExit (direction); 
player.setPlace (destination); 


render () ， 


return " "7 


get: function () { 


Var Place = Player.getPlace()， 


Var item = place.getLastItem(); 
player.addIitem (item) ， 
render () ， 


eturn TU 


12.5.1 go 方法 解读 


下 面 ， 我 们 逐条 分 析 以 上 go 方法 中 的 三 行 语句 ， 请 读者 寻找 其 中 潜在 的 问题 。 
1. 获取 玩家 的 位 置 


首先 ， 从 getPlace 方法 开始 。 我 们 使 用 getPlace 方法 返回 玩家 的 当前 位 置 : 
Var Place = player.getPplace(); 
该 方法 将 当前 位 置 分 配给 place 变量 ， 如 果 玩 家 目前 在 厨房 ， 那 么 以 上 代码 就 等 同 于 : 


Var Place = kitchen; 


该 程序 使 用 setPlace 方法 预先 设置 了 玩家 的 初始 位 置 ， 如 下 所 示 : 


player.setPlace (kitchen); 
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日 容 易 理 


。 玩 家 通 


2. 通过 方向 来 寻找 目的 地 
既然 程序 已 经 获得 了 当前 位 置 ， 就 可 以 通过 调用 该 位 置 的 getExit 方法 ， 利 用 指定 的 方 
向 来 检索 目的 地 ， 如 下 所 示 : 


Var destination = place.getExit (direction); 


当 玩 家 调用 go 方法 时 ， 将 实 参 传递 给 direction 形 参 。 


>game .go ("south") 


以 上 命令 等 同 于 以 下 代码 : 


Var destination = DLlace.getExit("Southn" ) ， 


如 果 图 书馆 在 厨房 的 南边 ， 那 么 该 代码 相当 于 : 


var destination = library; 
3. 将 玩家 移动 到 目的 地 
既然 程序 已 经 找到 了 目的 地 ， 下 一 步 只 需要 更 新 玩家 的 位 置 ， 如 下 所 示 : 


player.setPlace (destination); 


太 好 了 ! 在 游戏 中 ， 用 户 可 以 自由 决定 去 哪里 了 。 但 问题 是 ， 我 们 是 否 允 许 用 户 在 程序 
员 精 心 制作 的 城堡 里 自由 行走 ? 不 行 ! 我 们 知道 有 些 用 户 是 有 坏 心 思 的 ， 他 们 会 趁 虚 而 入 ! 


12.5.2 ”永远 不 能 轻信 用 户 输入 的 信息 
抱歉 ， 也 许 是 我 有 些 过 虑 了。 当然 用 户 本 身 并 不 收 恶 ， 但 他 们 在 输入 信息 时 难免 会 有 
些 手 误 ， 有 些 用 户 还 会 养 猫 ， 这 些 猫 大 多 不 老实 ， 常 常 在 键盘 上 动手 动 脚 ， 而 且 它 们 又 不 会 
痊 入 ， 因 此 错误 更 是 在 所 难免 。 当 程序 期 望 用 户 提供 输入 时 ， 我 们 必须 提防 用 户 输入 中 的 各 
种 错误 ， 无 论 是 输入 手 误 〈 可 能 是 猫 引 起 的 )， 还 是 出 于 好 奇 对 程序 内 部 的 示 探 。 
go 方法 希望 用 户 以 字符 串 的 形式 输入 一 个 有 效 方向 ， 并 利用 该 方向 寻找 目的 地 ， 即 
玩家 想 要 去 的 地 方 。 但 是 ， 如 果 用 户 输入 了 一 个 不 存在 的 方向 ， 如 下 所 示 ， 整 个 游戏 就 


会 中 断 。 


ES 
三 


>game .go ("snarf") 


在 JS Bin 上 运行 The Crypt 中 的 第 11 章 的 版 本 ， 当 输入 以 上 命令 后 ， 控 制 台 上 就 会 出 现 
以 下 报错 消息 ， 如 图 12-4 所 示 。(http://jsbin.com/yuporu/edit?js,console) 


》game.go("snarf'") 
X "undefined is not an object (evaluating 'place.showInfo')" 
> game.go("south") 


X "undefined is not an object (evaluating 'place.getExit')" 


> | 


图 12-4 ”输入 一 个 不 存在 的 方向 导致 游戏 中 断 


191 


215 


JavaScript 开发 实战 


使 用 不 同 的 浏览 器 ， 以 上 报错 消息 可 能 会 略 有 不 同 。 在 报错 消息 之 后 ， 即 使 再 输入 一 个 


有 效 的 方向 ， 也 不 和 


方法 的 关键 语句 ， 


使 月 


解决 问题 。 从 图 12-4 中 的 报错 消息 
日 了 用 户 输 入 的 信息 : 


var destination = place.getExi 


如 果 指 定 方向 并 不 是 该 位 置 的 出 口 ， 
undefined 分 配给 destination 变量 ， 并 将 该 值 设 置 为 玩家 的 新 位 置 : 


player.setPlac 


现在 玩家 的 位 置 是 undefined， 而 不 是 使 月 


方 根本 没有 showInfo 或 getExit 方法 ， 压 


错误 有 了 更 深入 的 理解 。 


t (direction); 


那么 getexit 函数 将 返 


(destination); 


那么 ， 我 们 应 该 如 何 防范 月 


有 户 (和 他 


门 的 猫 ) 犯 错误 ? 


12.5.3 ”确保 探索 不 会 中 断 一 一 使 用 让 语句 


为 了 避免 出 现 ] 


否 有 效 : 


go: function 


var plac 


上 述 问题 ， 


(direction) 


{ 


= player.getPlac 


全 过 


Var destination = place.getExit (direction); 


if (destination !== undefined) { 


player .setPlace (destination); 


render (); 


return ™"; 


}else { 


EE eee Le nO exit in that dlrection we; 


} 


如 果 在 当前 位 置 # 


SetPlace 


没有 指定 方向 的 出 
> 前 ， 只 需要 检查 destination 是 否 为 undefined， 如 下 所 示 : 


if (destination !== undefined) 


// 目 的 地 有 效 


} 


在 表 12-1 中 我 
返回 false。 可 以 添加 


{ 


一 个 else 子 句 来 应 对 目的 地 和 


if (destination !== undefined) 


// 目 的 地 有 效 


} else { 


// 该 指定 方向 无 出 口 
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{ 


， 则 getExit 方法 返回 undefined 。 


来 看 ， 问 题 可 能 出 在 place 变量 ，go 


器 undefined 。 该 程序 把 


日 Place 构造 函数 生成 的 地 方 。undefined 这 个 地 
民 儿 没有 任何 方法 ! 现在 ， 读 者 应 该 对 图 12-4 中 的 


在 更 新 玩家 的 位 置 之 前 ， 我 们 可 以 使 用 让 语句 来 检查 目的 地 是 


在 调用 


门 可 以 看 到 ， 当 两 个 值 不 相等 时 ，!= = 运算 符 返 回 true; 当 二 者 相等 时 ， 
角 实 未 定义 的 情况 ， 如 下 所 示 : 


以 下 代码 清单 12-8 是 从 getGame 函数 返回 的 go 方法 和 get 方法 的 更 新 版 本 。 在 控 什 


第 12 章 条件: 有 选择 地 运行 代码 


中 


上 输入 不 存在 的 方向 ， 就 会 出 现 如 下 交互 : 


>game .go ("snarf") 


*** YOU can’ 


t go in that direction *** 


如 果 没有 任何 东西 可 以 捡拾 ， 调 用 get 方法 ， 会 出 现 如 下 交互 : 


>game .get () 


*** There is no item to ge 七 *** 


在 此 代码 清单 中 ， 只 显示 了 更 新 部 分 的 代码 ， 完 整 列表 在 JS Bin 上 可 见 。 


人 ”代码 清单 12-8 


检查 用 户 的 输入 


丽 (http://jsbin.com/zoruxu/edit?js,console) 


var getGame = 
Var spacer 
var Player 
var Place 


var render 


var kitch 


function () { 

= A 3 

= function (name, health) { ... }; 
= function (title, description) { ... }; 

= function () { ... }; 
n = new Place("The Kitchen", "You are in a kitchen.."); 


Var library = new Place ("The Old Library", "You are in a library.."); 
kitchen.addExit ("south", library); 

lipbrary.addExit ("north", kitchen); 

// 游戏 初始 化 


var player 


= new Player ("Kandra", 50); 


player.addIitem("The Sword of Doom"); 


player.set 


Place (kitchen); 


render () 


return { 


/ /返回 一 个 带 有 go 和 get 方法 的 接口 对 象 


go: function (direction) { 


Var place = player.getPlace(); 
var destination = place.getExit(direction); 
// 使 用 getExit 找到 用 户 指 定 方向 的 目的 地 
if (destination!==undefined){ // 检 查 目 的 地 是 否 未 定义 ， 即 检 
// 查 它 是 否 有 交 
player .setPlace (destination); // 只 有 在 目的 地 存在 时 才 设 置 和 
// 显 示 新 位 置 
render (); 
return ""; 
} else { // 添 加 一 个 else 子 句 ， 用 于 处 理 目 的 地 是 undefineg 的 情况 


}, 


get: function () {  // 更 新 get 方法， 对 其 进行 与 go 方法 类 似 的 检查 


var 


return "*** You can’t go in that direction ***",; 


/7 向 用 户 反馈 指定 的 方向 无 效 


Place = player.getPlace(); 
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在 以 
点 聚焦 在 


t 开 发 实战 


var item = place.getLastItem(); 

if (Item !'== undefined) { 
player .addItem (item); 

render (); 

return ""; 

} else { 


return "*** There is no item to get ***",; 


} 


}; 
}; 
Var game = getGame (); 
上 代码 清单 12-8 中 ， 
对 go 和 get 方法 的 改进 。 在 第 


函数 自 ; 
程序 员 每 


,的 文件 中 ， 还 将 学 习 如 何在 JS Bin 中 导入 文件 。 


省 略 了 Player 和 Place 函数 构造 的 缉 
13 章 中 ， 读 者 将 学 习 如 
这 利 


节 ， 以 便 将 读者 的 关注 
可 把 每 个 函数 的 构造 放 在 该 


逐渐 增强 的 模块 化 概念 有 助 于 


次 只 关注 一 个 焦点 ， 并 且 有 助 于 程序 员 在 多 个 项 目 ! 


12.6 本章 小 结 


重用 某 些 代码 。 


国 使 用 比较 运算 符 比 较 两 个 值 ， 运 算 结 果 为 返回 布尔 值 true 或 false: 
> 二 == 避 // 严格 相等 
true 
> 10 > 13 17 天 于 
false 


图 仪 当 条 件 满足 时 ， 才 使 用 站 语 句 执行 代码 : 


图 使 用 比较 运 


国 当 


if (condition) 1 


// 如 果 条 件 的 值 为 true， 执 行 代码 
} 


算 符 和 (或) 变量 设置 条 件 : 


if (userNumber === secret) { 


// 如 果 userNumber 和 secret 完 


全 相等 ， 


执行 代码 
} 
if (inplay) { 

// 如 果 inPlay 的 值 为 true， 执 行 代码 


} 
条 件 不 满足 时 ， 


添加 else 子 句 执行 代码 : 
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if (condition) { 


/ /如果 条 件 的 值 为 


} else { 


true， 执 行 代码 
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// 如 果 条 件 的 值 为 false， 执 行 代码 
} 


国 在 else 子 句 中 包含 额外 的 站 语 句 来 处 理 更 多 的 可 能 性 : 


If (userNumber === secret) { 
console.log ("Well done!"); 
} elseif (userNumber>secret) { 


console.log ("Too hign!"™"); 
} else { 
console.log ("Too low!™"); 


} 
国 使 用 Math.random( ) 生 成 随机 数 ， 生 成 的 数字 在 0 和 1 之 间 ， 可 以 等 于 0， 但 不 可 以 


笠 于 
| 


>Math.random() 
0.552000432042405 


国 将 随机 数 按 比 例 放大 到 所 需 的 范围 : 


Math.random() * 10 // 0<= decimal<10 
Math.random() * 10 + 1 // 1<= decimal<11 


加 使 用 Math.floor( ) 将 随机 数 舍 入 为 整数 : 


Math.floor (Math.random() * 10 + 1) // 1<= integer<= 10 


国 不 能 相信 用 户 输入 的 数据 ， 要 对 其 进行 检查 ， 以 确保 输入 有 效 。 
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第 13 人 曹 模块 : 分 解 程序 


本 章 内 容 包 括 : 

图 使 用 Script 元 素 将 代码 导入 JS Bin 
图 避免 重复 的 变量 名 

图 运行 未 分 配 变 量 的 函数 

国 使 用 模块 组 织 ( 共享 ) 代码 库 


随 着 我 们 开发 的 应 用 程序 越 来 越 大 ， 涉 及 的 变量 、 对 象 、 数 组 和 函数 也 会 越 来 越 多 ， 因 
在 单个 程序 文件 内 高 效 地 运行 代码 也 会 变 得 越 来 越 困 难 。 好 的 文本 编辑 器 和 开发 环境 会 对 
发 者 提供 一 些 帮助 ， 但 即使 拥有 这 些 工 具 ， 也 需要 想 办 法 将 代码 拆 分 成 多 个 文件 。 

例如 ， 在 游戏 The Crypt 中 就 有 spacer、 玩 家 、 位 置 、 地 图 和 游戏 自身 逻辑 等 各 个 元 
。 读 者 可 能 已 经 注意 到 ， 包 括 以 上 所 有 元 素 的 代码 清单 在 JS Bin 上 已 经 变 得 相当 长 了 。 如 
果 能 够 将 每 个 元 素 的 代码 放 在 不 同 的 文件 中 ， 就 能 够 帮助 读者 每 次 只 关注 一 段 程序 ， 还 能 够 
助 各 个 程序 员 更 加 容易 地 开发 和 测试 应 用 程序 的 不 同 部 分 。 图 13-1 显示 如 何 将 这 个 大 程 
序 分 解 成 为 各 个 小 模块 。 


b= 


哉 


spacer 


spacer 


玩家 
玩家 
不 同 代码 自 拆 分 成 模块 
执行 不 同 功能 位 置 位 置 
地 图 代码 
地 图 代码 
游戏 初始 化 
游戏 初始 化 


所 有 代码 都 处 在 同一 个 文件 中 


每 一 段 代码 都 处 
在 不 同 的 文件 中 


图 13-1 将 一 个 大 程序 分 解 成 为 各 个 小 模块 


在 不 同文 件 中 使 用 具有 独立 功能 的 代码 片段 和 数据 也 有 助 于 代码 重用 。 开 发 者 不 再 需 
要 将 JavaScript 的 某 些 有 用 的 函数 和 代码 片段 从 一 个 项 目 剪 切 和 粘贴 到 其 他 项 目 中 ， 而 是 可 
以 将 其 保留 在 某 个 单个 的 库 文 件 中 ， 在 需要 时 将 其 导入 到 其 他 项 目 中 。 例 如 ， 第 7 章 中 的 
spacer 命名 空间 ， 用 于 在 控制 台 上 格式 化 文本 ， 开发 者 在 测验 程序 和 博客 程 训 中 都 可 以 使 
] 该 命名 空间 ， 开 发 者 希望 不 必 在 每 个 应 用 程序 中 都 重复 spacer 代码 ， 而 是 将 其 放 在 它 自 
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己 的 文件 中 ， 在 需要 时 导入 该 文件 即 可 (图 13-2 )。 
复制 的 方法 模块 的 方法 


spacer 


Quiz code 
Quiz code 


spacer 
22 spacer 代码 放 
在 它 自己 的 文件 中 
Blog code 

Blog code 

在 每 个 应 用 程序 中 ， 

用 复制 的 方法 ， 重 两 个 应 用 程序 都 导入 

复 使 用 spacer 代 码 spacer 文 件 


图 13-2 将 spacer 移动 到 一 个 模块 中 ， 这 样 就 可 以 在 多 个 项 目 中 使 用 该 模块 


在 本 书 中 ， 将 这 些 具 有 某 个 特定 功能 的 文件 统称 为 模块 。 目 前 ， 业 界 有 许多 已 发 布 的 
JavaScript 项 目 和 用 于 管理 模块 的 标准 ， 在 这 些 标准 中 ， 对 模块 必须 采用 的 形式 有 更 严格 的 
定义 ， 最 新 版 本 的 JavaScript 正在 推出 自身 的 模块 系统 。 它 们 对 模块 的 定义 严谨 而 复杂 ， 在 
本 书 中 ， 就 暂且 简单 粗略 地 使 用 模块 概念 了 。 

本 章 讨论 如 何 使 用 HIML script 元 素 将 模块 导入 JS Bin， 读 者 将 看 到 如 何 把 随机 数 生成 
函数 和 spacer 命名 空间 的 文本 格式 化 功能 合并 到 其 他 项 目 中 去 。 在 着 手 将 各 个 模块 的 代码 植 
入 到 某 单个 程序 中 时 ， 请 务必 密切 关注 正在 使 用 哪些 变量 名 称 ， 因 为 植 入 过 程 中 存在 风险 ， 
即 导 入 的 文件 有 可 能 会 覆盖 程序 中 已 有 的 变量 。 为 了 规避 以 上 风险 ， 我 们 引入 以 下 两 种 方 
法 : 使 用 命名 空间 和 使 用 立即 调用 函数 表达 式 。 立 即 调用 函数 表达 式 是 一 种 不 将 函数 分 配给 
变量 而 直接 运行 函数 代码 的 方法 。 

下 面 ， 我 们 先 来 了 解 JS Bin 如 何 处 理 文 件 。 


13.1 了 解 JS Bin 上 的 bin 和 文件 


在 本 书 第 12 章 ， 我 们 创建 了 一 个 简单 的 游戏 ， 让 玩家 在 1 到 10 之 间 猜 测 一 个 数字 ， 该 
数字 由 Math.random 方法 生成 。 现 在 ， 我 们 想 采 用 类 似 的 方式 来 更 新 测验 应 用 程序 ， 从 问题 
库 中 随机 显示 一 个 问题 。 以 上 猜 数 字 游 戏 和 测验 程序 都 需要 在 两 个 界限 范围 之 内 生成 一 个 随 
机 整数 ， 因 此 ， 二 者 都 可 以 使 用 以 下 函数 : 


Var between = function (lowest, highest) { 
// 返 回 一 个 介 于 最 低 值 和 最 高 值 之 间 的 整数 


}; 
在 本 节 中 ， 读 者 将 学 习 如 何在 JS Bin 上 创建 并 保存 包含 数字 生成 器 代码 的 JavaScript 文 
件 ; 在 13.2 节 中 ， 读 者 将 学 习 如 何 加 载 文件 ;在 13.3 节 中 ， 读 者 将 学 习 如 何 将 该 文件 加 载 
到 猜 数 字 游 戏 和 测验 应 用 程序 中 ， 如 图 13-3 所 示 。 
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数字 生成 器 代码 在 自己 的 文件 中 


Number Generator 


Quiz App Guessing Game 


两 个 应 用 程序 都 导入 了 同一 个 文件 
程序 和 猜 数 字 游 戏 都 导入 了 数字 生成 器 代码 


图 13-3 ”测验 应 


在 学 习 如 何 导入 文件 之 前 ， 读 者 需要 简单 了 解 JS Bin 如 何 保存 文件 。JS Bin 是 一 个 简单 
的 开发 环境 ， 允 许 用 户 在 各 自 独立 的 面板 中 处 理 HTML、CSS 和 JavaScript 代码 。 图 13-4 
显示 了 这 三 个 面板 同时 打开 的 界面 ， 在 每 个 界面 中 都 有 一 些 代 码 。 


国 ecount Blog Help 


虽 File ~ Add library Share HTML CSS JavaScript Console Output 


1 <!DOCTYPE html> 


2 <html> 
3 <head> 
<meta charset="utf-8"> 
<meta name="viewport" 
content="width=device-width"> 


{ 
color: red; 


{ 
color: blue; 


1 var msg = "Hello World!"; 


3 console.log(msg);| 


<title>Web page example</title> 
7 </head> 
<body> 
<hl>This is a heading</h1> 
<p>This is a paragraph.</p> 


14 </body> 
15 </html> 


图 13-4 JSBin 上 的 HTML、CSS 和 JavaScript 面板 


JS Bin 可 以 将 HTML、CSS 和 JavaScript 面板 中 的 代码 合并 生成 一 个 我 们 所 需要 的 网 
页 ， 并 显示 在 输出 (Output) 面板 中 (图 13-$) 。 在 本 书 的 第 三 部 分 将 更 加 详细 地 介绍 
HTML 和 CSS 的 相关 知识 。 


HTML Console 


轴 Fie ~ 


Output 


Add library Share CSS JavaScript Output 


This is a heading 


This is a paragraph. 


图 13-5 HTML、CSS 和 JavaScript 代码 合并 生成 网 页 输出 


代码 运行 过 程 中 发 生 的 任何 错误 或 警告 都 会 在 控制 台 〈Console) 面板 中 显示 ， 该 面板 
还 可 以 显示 JavaScript 代码 的 输出 一 一 这 是 迄今 为 止 我 们 在 本 书 中 一 直 采 用 的 显示 输出 方 
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式 。 读 者 目前 一 直 在 专心 学 习 JavaScript， 因 此 不 必 分 心 去 考虑 如 何 根据 Output 面板 中 的 内 
容 生成 网 页 。 打 开 链 接 http://jsbin.com/jejunu/edit?output， 即 可 在 JS Bin 中 查看 图 13-4 和 
13-5 中 的 页 面 ， 在 不 同 的 面板 之 间 切 换 可 以 查看 代码 。 

JS Bin 不 仅 为 程序 员 提 供 一 个 环境 来 编辑 合成 构建 网 页 的 各 种 类 型 代码 ， 还 可 以 将 
HTML、CSS 和 JavaScript 代码 作为 单独 的 文件 进行 访问 。 想 要 创建 JavaScript 代码 并 将 其 视 
为 单独 的 文件 ， 请 在 JS Bin 中 按照 以 下 步 又 进行 操作 : 

(1) 创建 一 个 bin。 

(2) 在 JavaScript 面板 中 编写 一 些 代 码 。 

(3) 记录 文件 名 。 

(4) 查看 单个 代码 文件 。 


13.1.1 创建 一 个 bin 


在 JS Bin 的 file 菜单 上 ， 单 击 new， 就 可 以 创建 HIML、CSS 和 JavaScript 三 个 文件 ， 
并 在 相应 面板 上 显示 每 个 文件 的 内 容 ， 这 三 个 文件 统称 为 一 个 bn。 对 于 一 个 新 创建 的 bin， 
其 HTML 文件 中 已 经 包含 了 大 多 数 新 网 页 通用 的 样板 代码 ， 而 CSS 文件 和 JavaScript 文件 
中 则 是 空白 的 。 
13.1.2 编写 代码 

请 将 以 下 代码 添加 到 JavaScript 面板 中 : 


var between = function (lowest, highest) { 
Var range = highest - lowest + 1; 
return lowest + Math.floor(Math.random() * range); 
}; 
在 以 上 代码 中 ，between 函数 将 返回 一 个 在 lowest 和 highest 之 间 的 随机 整数 。 例 如 ， 
between(3, 5) 将 返回 3、4 或 5。 


13.1.3 ”记录 文件 名 


JS Bin 为 每 个 bin 分 配 一 个 代码 ， 用 于 编辑 和 访问 bin 内 的 文件 。 请 查看 浏览 器 地 址 栏 
中 的 当前 网 址 (有 可 能 需要 单 击 地 址 栏 ， 才 能 看 到 完整 的 地 址 )。 图 13-6 展示 了 这 样 一 个 网 
址 ， 其 bin 代码 为 qezoce， 可 见面 板 为 HIML、JavaScript 和 Console。 


Bin 代 码 可 见面 板 


http://jsbin.com/qezoce/edit?html,js,console 


加 载 编 辑 环境 


图 13-6 JS Bin 网 址 (URL) 分 解 图 


请 读者 记录 一 下 自己 当前 工作 的 bin 代码 ， 它 肯定 不 同 于 图 13-6 所 示 的 bin 代码 ， 因 为 
qezoce 是 本 书 作 者 当前 工作 的 bin 代码 。 
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13.1.4 查看 单个 代码 文件 


要 访问 某 个 代码 文件 ， 请 使 用 不 同 的 URL 格式 ， 如 图 13-7 所 示 。 该 格式 包含 一 个 
output 前 级 ， 以 bin 代码 和 文件 扩展 名 结尾 。 该 文件 扩展 名 指定 要 加 载 的 文件 类 型 ，js 代表 


JavaScript。 


上 


Bin 代 码 


三 


http://output.jsbin.com/qezoce.js 


前 缀 文件 扩展 名 
图 13-7 一 个 JavaScript 文件 的 JS Bin URL 
访问 http:/outputjsbin.comy/qezocejs， 只 是 加 载 JavaScript 文件 ， 如 图 13-8 所 示 ， 并 不 会 加 
载 JS Bin 编辑 环境 的 所 有 面板 、 菜 单 及 控件 ， 该 文件 只 是 纯 文 本 内 容 的 JavaScript 文件 。 


全 DD | < 田 outputjsbin.com © © 由 7 


output.jsbin.com/aezoce.js | = 


var between = function (lowest, highest) { 
var range = highest - lowest + 1; 
return lowest + Math.floor(Math.random() * range); 


}; 
图 13-8 JS Bin 上 的 JavaScript 文件 
在 该 文件 中 ， 可 能 已 经 删除 了 不 必要 的 空格 和 换行 符 ， 因 此 在 我 们 人 类 看 来 ， 就 感觉 格 


式 不 够 整齐 和 美观 。 可 以 试 试 在 JS Bin 上 使 用 bin 代码 加 载 文件 。 非 常 好 ! 我 们 已 经 得 到 了 
一 个 文件 的 纯 JavaScript 代码 ， 下 一 步 就 是 如 何 将 它 植 入 到 其 他 程序 中 。 


13.2 将 文件 导入 其 他 项 目 


我 们 将 使 用 上 一 节 的 数字 生成 函数 between 来 创建 一 个 程序 ， 步 又 如 下 : 
(1) 创建 一 个 bin。 
(2) 在 JavaScript 面板 中 编写 代码 。 
(3) 将 script 元 素 添 加 到 HTML 面板 。 
(4) 刷新 页 面 。 
(5) 运行 程序 。 

13.2.1 创建 一 个 bin 


在 JS Bin 上 ， 单 击 fle 菜单 上 的 new， 就 可 以 创建 一 个 bn。 系统 会 自动 重 置 HTML， 
CSS 和 JavaScript 面板 。 


13.2.2 ”编写 代码 
在 JavaScript 面板 中 输入 以 下 代码 : 
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// 需要 数字 生成 器 模块 


Var num = between (3, 7); 


console.1og (num); 


如 果 运 行 以 上 程序 ， 就 会 产生 一 个 错误 缺少 对 between 的 变量 声明 或 函数 定义 。 因 为 
between 函数 处 在 一 个 单独 的 文件 中 ， 这 样 就 引发 了 依赖 问题 。 当 程序 员 将 代码 拆 分 成 模块 
后 ， 一 个 模块 需要 依赖 另 一 个 模块 才能 够 运行 的 情况 并 不 罕见 ， 以 上 代码 就 依赖 于 数字 生成 
器 模块 才能 够 运行 。 更 高 级 的 模块 系统 通常 会 自动 加 载 各 个 依赖 关系 ， 并 让 程序 员 明 确 地 记 
录 这 些 依赖 关系 。 本 书 中 并 没有 采用 这 些 高 级 的 模块 系统 ， 因 此 采用 添加 注释 的 方式 来 显示 
依赖 关系 所 需要 的 模块 。 


13.2.3 ”添加 script 元 素 


现在 ， 我 们 开始 使 用 JS Bin 上 的 HIML 面板 。HTML 是 用 于 构成 网 页 结构 和 内 容 的 代 
码 ， 用 于 指定 标题 、 段 落 、 列 表 以 及 链接 等 内 容 ， 详 细 内 容 将 在 第 17 章 中 进行 介绍 ， 并 在 
本 书 第 三 部 分 得 以 充分 运用 。 当 前 ， 读 者 的 学 习 重 点 依然 是 JavaScript，JS Bin 用 来 帮助 读 
者 学 习 和 探索 JavaScript。 我 们 只 是 使 用 少许 的 HTML 片段 ， 将 很 长 的 JavaScript 程序 分 解 
成 为 单独 的 文件 ， 并 根据 需要 加 载 各 文件 。 我 们 使 用 HTML script 元 素 指定 要 加 载 的 
JavaScript 文件 。 图 13-9 显示 了 构成 HTML script 元 素 的 各 个 部 分 。 


script 元素 


<scripe sre="htep//outpue lsbinecom/qezoce su > /serioeS 


script 开始 标记 script 结束 标记 
src 属 性 


<acript sre=uneepN/ /oupaue Tsbin com/ezoce ou /sei 


要 加 载 的 文件 地 址 
图 13-9 ”script 元 素 的 构成 


读者 不 必 担 心 上 述 HTML 的 各 种 术语 ， 也 不 需要 完全 了 解 HTML 的 元 素 、 标 记 和 属 
性 ， 只 要 学 会 如 何 使 用 script 元 素 加 载 文 件 即 可 。 关 于 HTML 的 更 多 内 容 ， 将 在 第 17 章 中 
继续 讲解 。 

在 JS Bin 上 显示 HTML 面板 ， 就 会 看 到 一 些 默认 的 HTML 代码 。 谨 记 ， 我 们 现在 的 目 
标 并 不 是 创建 一 个 网 页 ， 而 是 要 加 载 一 个 JavaScript 文件 。 请 使 用 在 上 一 节 中 创建 文件 的 bin 
代码 替换 默认 的 HIML 代码 来 加 载 JavaScript， 如 下 所 示 : 
<script src="http://output.jsbin.com/qezoce.js"></script> 
被 包含 的 HTML 是 具有 src 属性 的 单个 script 元 素 。 程 序 员 可 以 使 用 script 元 素来 加 载 
src 属性 指定 的 JavaScript 文件 (src 是 source 的 缩写 形式 ， 指 明文 件 的 地 址 )。 通 常 ， 要 用 下 
面 的 格式 来 加 载 文件 : 
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<script src="path/to/someFile.js"></script> 


新 版 本 的 浏览 器 会 默认 文件 已 经 包含 了 JavaScript， 但 对 于 老 版 本 的 浏览 器 ， 程 序 员 还 
是 要 手工 添加 一 个 type 属性 。 


13.2.4 


<script src="path/to/someFile.js" type="text/javascript"></script> 


刷新 页 面 
JS Bin 并 不 能 完全 自动 加 载 文件 ， 可 能 需要 在 添加 script 元 素 后 刷新 浏览 器 页 面 。 
运行 程序 


13.2.5 


单 击 Run 按钮 ， 控 制 台 面板 上 会 显示 一 个 介 于 3 和 7 之 间 的 数字 ， 继 续 单 击 Run 按钮 


可 以 生成 更 多 的 随机 数 。 
代码 清单 13-1 和 13-2 是 同一 程序 的 HTML 和 JavaScript， 两 个 代码 清单 的 JS Bin 链接 
指向 同一 个 bin。 运 行 5 次 该 程序 ， 会 产生 以 下 输出 (数字 是 随机 的 1): 


V V V VvV Vv 
i Cn 


代码 清单 13-1 使 用 script 标签 加 载 JavaScript (HTML) 
(http://jsbin.com/lifugam/edit?html,js,console) 


<script src="http://output.jsbin.com/qezoce.js"></script> 


代码 清单 13-2 ”JavaScript 面板 中 的 代码 
(http://jsbin.com/lifugam/edit?html,js,console) 
// 需 要 数字 生成 器 模块 

Var num = between(3, 7); 


console.1og (num); 


运行 程序 时 ，JS Bin 首先 加 载 并 运行 script 元 素 的 src 属性 指定 的 文件 ， 然 后 运行 JavaScript 
面板 中 的 所 有 代码 。 被 加 载 的 文件 和 JavaScript 面板 中 的 代码 一 起 构成 了 下 面 这 个 程序 : 


// 来 自 要 加 载 的 文件 
Var between = function (lowest, highest) { 
Var range = highest - lowest + 1; 
return lowest + Math.floor (Math.random() * range); 
}; 
// 来 自 JavaScript 面板 
Var num = between (3, 7); 


console.1og (num); 


~ 
Im 


单 击 控制 台面 板 中 的 Run 按钮 时 ，JS Bin 可 能 需要 一 点 时 间 才 能 加 载 script 标签 中 指 
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定 的 文件 。 代 码 运行 后 ， 将 在 控制 台 上 输出 随机 数 。 


13.3 ”导入 数字 生成 器 一 一 进 阶 示例 


在 本 章 13.1 节 ， 我 们 学 习 了 JS Bin 如 何 为 程序 员 创 建 的 每 个 bin 分 配 代 码 ， 以 及 如 何 使 

用 该 代码 来 访问 项 目 中 的 各 个 文件 。 在 13.2 节 ， 以 随机 数 生成 器 函数 between 为 例 ， 我 们 学 

习 了 如 何 创建 并 访问 包含 模块 的 JavaScript 文件 。 程 序 员 将 工作 分 解 为 模块 的 目标 之 一 就 是 
在 多 个 项 目 中 能 够 导入 和 使 用 相同 的 代码 ， 而 不 是 复制 和 粘贴 这 些 代 码 ， 如 图 13-10 所 示 。 

数字 生成 器 代码 在 自己 的 文件 中 


数字 生成 器 


测验 应 用 程序 猜 数 字 游 戏 


同一 个 文件 被 导入 两 个 应 用 程序 中 
图 13-10 ”将 数字 生成 器 导入 两 个 项 


下 面 ， 我 们 将 数字 生成 器 导入 测验 应 用 程序 和 猜 数 字 游 戏 两 个 项 目 ， 以 便 更 加 深入 地 理 
解 以 上 概念 。 
13.3.1 在 测验 应 用 程序 中 随机 选择 问题 


首先 ， 对 测验 应 用 程序 进行 随机 化 处 理 ， 每 次 在 控制 台 上 调用 quizMe 时 ， 新 版 本 程序 
都 会 从 问题 库 中 随机 显示 一 个 问题 ， 如 下 所 示 : 


>quiz.quizMe () 

5x6 

>quiz.submit ("30") 
Correct! 
>quiz.quizMe () 

7x8 

>ouiz. Sumit ("0") 
No, the answer is 56 


代码 清单 13-4 显示 了 该 测验 应 用 程序 主体 部 分 的 JavaScript。 通 过 使 用 HTML 面板 上 
的 script 元 素 〈 代 码 清 单 13-3) 导入 between 函数 的 代码 。 


人 给。 代码 清单 13-3 在 测验 应 用 程序 中 使 用 数字 生成 器 (HTML) 
F (http://jsbin.com/ponogi/edit?html,js,console) 


<script src="http://output.jsbin.com/qezoce.js"></script> 
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代码 清单 13-4 ”在 测验 应 用 程序 中 使 用 数字 生成 器 


yy (http:/jsbin.com/ponogi/edit?html,js,console) 


var getQuiz = function () { // 把 代码 包 庄 在 函数 内 以 创建 局 部 作用 域 


}; 


var quiz = getQuiz(); // 把 getouiz 返回 的 接口 分 配给 quiz 变量 


Var qdqIindex = 0; 
Var questions = [ 
{ question: "7 x 8", answer: "56"” }, 
{ question: "12 x 12", answer: "144" }, 
{ gquestion: "5 x 6", answers "307 Ty 
{ question: "9 x 3", answer: "27" } 
]; 
Var getQuestion = function () { 
qIndex = between(0，questions.length - 1); // 使 用 between 函数 随 


// 机 选择 一 个 问题 


return questions[gqIndex] .question; 
}; 


Var checkAnswer = function (userAnswer) { 


if (userAnswer === questions[qIndex] .answer) { 
return "Correct!"; 
} else { 


return "No, the answer is " + questions[gqIndex] .answer; 


}; 
return { // 从 getQuiz 函数 返回 一 个 接口 对 象 
quizMe: getQuestion, 


submit: checkAnswer 


}; 


在 以 上 代码 清单 中 ，between 函数 从 问题 库 中 挑选 了 一 个 随机 问题 ，questions 数组 中 的 
元 素数 量 由 questions.length 决定 (每 个 数组 都 有 一 个 length 属性 ) ， 问 题 索引 值 是 从 0 到 小 
于 length 的 数字 。 如 果 数 组 中 有 4 个 元 素 ， 那 么 索引 值 就 是 从 0 到 3。 因 此， 使 用 下 面 的 语 
句 就 可 以 选择 一 个 随机 索引 : 


gqIndex = between(0, questions.lengtn - 1) 


不 


常 运行 的 代码 ) 隐藏 在 getQuiz 函数 里 ， 然 后 返回 一 个 公共 接口 对 象 。 


旦 序 员 可 以 使 用 第 11 章 中 讲 到 的 打包 -返回 的 模块 方式 ， 把 代码 的 功能 实现 《使 程序 正 


请 按照 代码 清单 提供 的 链接 ， 到 JS Bin 去 测试 一 下 你 的 乘法 水 平 ! 所 有 答案 都 是 以 字符 形 
式 存 储 ， 因 此 ， 请 确保 你 提交 的 是 字符 串 ， 程 序 才能 够 检测 ， 例 如 应 提交 quiz.submit("30")， 而 
不 是 quiz.submit(30)。 


13.3.2 ”在 猜 数字 游戏 中 使 用 between 函数 
代码 清单 13-6 显示 了 猜 数 字 游 戏 的 JavaScript 代码 。 在 控制 台 提 示 符 下 ， 玩 家 必须 在 5 
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到 10 之 间 猜 测 数字 ， 交 互 如 下 : 


>guess (7) 
Too high! 
>guess (5) 
Too low! 
>guess (6) 
Well done! 


该 应 用 程序 使 用 了 between 函数 ， 所 以 导入 该 函数 时 需要 使 用 HTML 面板 (如 清单 13-5 


所 示 ) 中 的 script 元 素 。 


代码 清单 13-5 ”在 猿 数 字 游 戏 中 使 用 数字 生成 器 (HTML) 
(http://jsbin.com/tixina/edit?html,js,console) 


<script src="http://output.jsbin.com/qezoce.js"></script> 


E “代码 清单 1356 在 猜 数 字 游 戏 中 使 用 数字 生成 器 
(http://jsbin.com/tixina/edit?html,js,console) 


var getGuesser = function (lowest,highest){ // 把 代码 包 陵 在 函数 中 以 创建 局 部 作用 域 
var secret = petween (lowest， highest); // 使 用 between 函数 选择 一 个 随机 数 
return function (userNumber) { // 返 回 一 个 供 玩家 做 猜测 的 函数 

if (userNumber === secret) { 


return "Well done!™",; 


} else if (userNumber> secret) { 
return "Too high!"; 


} else { 


return "Too low!"™; 
} 
}; 
}; 
var guess = getGuesser (5, 10); // 将 返回 的 函数 赋值 给 guess 变量 
请 按照 以 上 代码 清单 所 提供 的 链接 ， 去 JS Bin 上 玩 猜 数字 游戏 ! 
在 以 上 猜 数 字 游 戏 和 测验 应 用 程序 中 都 导入 了 相同 的 数字 生成 器 文件 。 这 种 将 数字 生成 
器 代码 存放 在 一 个 文件 中 的 做 法 保证 了 该 数字 生成 器 的 稳定 性 ， 对 其 任何 更 新 或 修改 只 需 在 
此 单一 文件 上 进行 即 可 ， 以 后 所 有 使 用 该 文件 的 项 目 加 载 的 就 是 该 文件 的 最 新 版 本 。 
我 们 看 到 ， 在 编程 项 目 中 文件 导入 是 非常 有 用 的 。 下 面 介 绍 如 何 加 载 多 个 文件 。 


13.4 导入 多 个 文件 


在 第 7 章 和 第 11 章 中 ， 我 们 学 习 了 如 何 将 对 象 用 作 命 名 空间 ， 只 需要 使 用 一 个 变量 就 
可 以 将 多 个 属性 和 多 个 方法 集合 在 一 起 。 例 如 ， 我 们 创建 的 spacer 是 一 个 函数 的 命名 空间 ， 
于 在 控制 全 上 对 文本 进行 格式 化 ， 该 方法 可 以 用 在 许多 项 目 中 。 当 程序 员 需 要 使 用 边框 来 
格式 化 输出 文本 时 ， 就 可 以 使 用 该 命名 空间 。 如 何 使 用 ? 并 不 是 将 spacer 代码 复制 和 粘贴 到 
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每 一 个 需要 它 的 程序 里 面 。 命 名 空间 看 起 来 更 像 一 个 奉 补 队员 ， 平 时 采 在 自己 的 文件 中 待 
命 ， 在 需要 时 就 挺身 而 出 ， 被 导入 到 所 需 程 序 中 。 请 打开 链接 http:/jsbin.conyjuneqo/edit?js 
查阅 spacer 代码 。 

现在 我 们 就 来 邀请 spacer 出 山 工 作 。 在 以 上 代码 清单 13-6 中 ， 通 过 导入 between 函数 
更 新 了 猜 数 字 游 戏 ， 使 用 该 函数 生成 让 用 户 猜 测 的 密码 数字 。 假 设 我 们 现在 想 把 给 玩家 的 反 
馈 信息 进行 一 定 的 格式 化 ， 也 就 是 把 反馈 消息 包装 在 一 定格 式 的 边框 中 ， 那 就 非 spacer 莫 属 
了 。 游 戏 在 控制 台 上 的 交互 如 下 : 


噶 


尊 


>guess (10) >guess (10) >guess (10) 
Too hignh!+ - Too low! - = well done! = 
数字 生成 器 
spacer 
猜 数 字 游 戏 


可 以 根据 需要 导入 任意 数量 的 模块 
图 13-11 导入 数字 生成 器 和 spacer 模块 
13-11 显示 猜 数字 游戏 应 用 程序 导入 了 数字 生成 器 和 spacer 两 个 模块 。 


代码 清单 13-7 显示 添加 到 HTML 面板 的 script 元 素 ， 用 于 导入 程序 正在 使 用 的 两 个 
模块 。 


代码 清单 13-7 在 猜 数 字 游 戏 中 使 用 spacer 和 between (HTML) 
(http://isbin.com/foqowa/edit?html,js,console) 


<!-- 数 字 生 成 器 --> 

<script src="http://output.jsbin.com/qezoce.js"></script> 
<!-- spacer 模块 --> 
<script src="http://output.jsbin.com/juneqo.js"></script> 


在 上 述 代 码 中 ， 添 加 注释 的 作用 在 于 说 明正 在 导入 哪些 模块 。JS Bin 地 址 对 用 户 不 是 非 
常 友 好 ， 因 此 有 必要 清楚 地 标明 正在 试图 加 载 的 内 容 。 这 些 注释 是 HTML 注释 ， 因 此 看 起 
来 与 JavaScript 注释 有 所 不 同 。 

以 下 代码 清单 13-8 显示 了 猿 数 字 游 戏 如 何 使 用 导入 的 between 和 spacer 两 个 模块 。 


代码 清单 13-8 ”在 猜 数 字 游戏 中 使 用 spacer 和 between 
(http://jsbin.com/foqowa/edit?html,js,console) 


var getGuesser = function (lowest, highest) { 
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Var secret = between (lowest,， highest);// 使 用 导入 的 between 函数 
return function (userNumber) 1{ 
if (userNumber === secret) { 
return spacer.box("Well done!",14,"=");// 使 用 导入 的 spacer 命名 空 


} else if (userNumber> secret) { 


间 


return spacer.box("Too hignl" 13, "+"); 
} else { 
return spacer.box("Too low!", 12, "-"); 


}; 
}; 


Var guess = getGuesser (5，10) ， 
在 编程 实践 中 ， 程 序 员 常 常 将 已 经 编写 和 测试 过 的 代码 存放 在 单独 的 文件 中 ， 这 样 做 有 
助 于 他 们 将 主要 精力 集中 在 编写 新 代码 的 工作 上 。 代 码 清单 13-8 简短 而 精炼 ， 归 功 于 其 中 
打包 导入 了 我 们 信赖 的 spacer 代码 。 
当 程序 员 导 入 JavaScript 时 ， 就 仿佛 是 将 所 有 导入 的 代码 都 连接 在 一 起 ， 从 而 形成 一 个 
文件 。 如 果 在 不 同 的 导入 文件 中 使 用 了 相同 的 变量 名 ， 那 么 后 来 的 代码 就 可 能 会 无 意 中 歼 善 
早期 的 代码 ， 这 样 就 会 导致 变量 之 间 发 生 冲 突 ! 


13.5 冲突 新 导入 的 代码 会 履 盖 原先 的 变量 


程序 员 感 觉 猜 数字 游戏 中 给 用 户 反馈 的 带 边 框 消息 有 些 多 余 ， 现 在 希望 反馈 信息 如 
下 所 示 : 


>guess (10) >guess (9) 
+ T-o-o- -h-i-g-h-! + = W-e-l1-l1- -d-o-n-e-! = 


这 些 消息 占用 的 空间 更 少 ， 而 且 各 个 字符 之 间 被 破 折 号 整齐 地 分 隔 。 如 何 实 现 上 述 格 
式 ? 我 伴 巧 有 个 朋友 Kallie 一 直 在 使 用 她 自己 的 格式 化 函数 ， 还 把 这 些 函数 打包 成 了 一 个 可 
以 导入 的 模块 ， 命 名 为 dasher， 非 常 易于 拿 来 使 用 : 


dasher ("message"); // m-e-s-s-a-g-e 


dasher ("Too low!"); // T-o-o- -1-o-w-! 


我 马上 在 猜 数字 游戏 的 HTML 面板 中 添加 一 个 script 元 素 ， 来 导入 Kallie 的 代码 ， 如 下 
所 示 : 


代码 清单 13-9 导入 Kallie 的 代码 (HTML) 
(http:/jsbin.com/zusodu/edit2html,js,console) 


<!-- 数 字 生成 器 --> 

<script src="http://output.jsbin.com/qezoce.js"></script> 
<! 一 spacer 模块 = 

<script src="http://output.jsbin.com/juneqo.js"></script> 
<! 一 Kallie 的 代码 --> 
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<script src="http://output.jsbin.com/soxeke.js"></script> 


我 无 需 知道 Kallie 代码 的 JavaScript 内 容 ， 只 需 知道 dasher 是 接口 部 分 ， 是 我 所 希望 使 
的 变量 和 函数 。 我 也 无 需 知 道 dasher 内 部 的 具体 实现 方式 ， 只 需 知道 dasher 函数 的 作用 即 
可 。 当 然 ， 读 者 也 可 能 确实 对 dasher 内 部 的 具体 实现 感 兴趣 ， 但 是 我 认为 ， 没 有 必要 为 了 使 


一 
I 


234| 用 该 接口 而 去 费力 地 理解 其 内 部 的 具体 实现 。 


以 下 为 如 何 使 用 dasher 函数 来 更 新 猜 数 字 游 戏 。 


3 “代码 清单 13-10 ”使 用 Kallie 的 代码 
吕 (http://jsbin.com/zusodu/edit?html,js,console) 
var getGuesser = function (lowest, highest) { 


Var secret = between (lowest, highest); 


return function (userNumber) { 


var msg; 

If (userNumber === secret) { 
msg = dasher ("Well done!"); // 使 用 dasher 分 隔 消息 里 的 各 个 字符 
return spacer.wrap (msg, msg.length + 4, "="); 


} else if (userNumber> secret) { 


msg = dasher ("Too high!"); 

return spacer.wrap (msg, msg.length+4,"+"); // 使 用 spacer.wrap 
// 将 一 个 字符 作为 消息 
// 的 开始 和 结束 标志 


} else { 
msg = dasher ("Too low!"); 


return spacer.wrap (msg, msg.length + 4, "-"); 


}; 
}; 
var guess = getGuesser(5, 10); 


上 述 代 码 编写 得 很 满意 ! 下 面 ， 我 们 运行 程序 来 进行 数字 猜测 。 错 误 ! 什么 ? 
spacer.wrap 去 哪里 了 ? 报错 信息 如 图 13-12 所 示 。 


BR Account Blog Help 
[51 


Console Run Clear 


》 guess (5) 


X "spacer .wrap is not a function. (In 
!spacer .wrap(msg, msg.length + 4, \"-\")', 
!'spacer .wrap' js undefined)" 


> | 


图 13-12 ”报错 信息 : 程序 找 不 到 spacer.wrap 


spacer.wrap 似乎 出 问题 了 。 令 人 不 解 的 是 ， 作 为 spacer 名 字 空 间 的 一 部 分 ，spacer.wrap 

从 第 7 章 以 来 一 直 很 好 用 ， 为 什么 现在 出 问题 了 ? 仔细 检查 Kallie 的 模块 ， 从 她 的 代码 清单 

中 ， 终 于 发 现 了 问题 所 在 
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代码 清单 13-11 ”Kallie 的 格式 代码 
0 


(http://ijsbin.com/soxeke/edit?js,console) 


var spreader = function (text，character) { // 定 义 一 个 函数 ， 用 指定 字符 均 
// 匀 地 将 文本 分 散 开 


return text.split("") .join(character); 
}; 
Var spacer = function (text) { // 定 义 一 个 用 空格 均匀 分 散文 本 的 函数 


return spreader (text, ™ "); 


}; 
var dasher = function (text) { // 定 义 一 个 用 短 划 线 均匀 分 散文 本 的 函数 


return spreader (text, "-"); 


}; 


Kallie 的 代码 不 仅 包 括 dasher 函数 ， 还 包括 spacer 函数 。 她 使 用 了 三 个 全 局 变量 : 
spreader、spacer 和 dasher。 我 的 spacer 命名 空间 也 使 用 了 一 个 全 局 变量 spacer。 现 在 ， 她 的 
spacer 覆盖 了 我 的 spacer， 如 图 13-13 所 示 。 


spacer Number Generator 


Var SpacCer = -开元 


二 我 们 可 以 根据 需要 导 
局 入 更 多 的 模块 ， 但 是 


务必 注意 变量 冲突 


Guessing Game 


Kallie’s Code 


var spacer = ... 第 二 spacer 模块 覆盖 了 
第 一 spacer 模块 


图 13-13 在 两 个 模块 中 声明 了 的 相同 全 局 变量 ， 从 而 导致 冲突 


问题 并 不 在 于 函数 的 实现 部 分 函数 本 映 运行 良好 ) ， 而 在 于 如 何 让 函数 在 模块 中 依然 
可 用 。 编 写 各 个 模块 的 程序 员 都 有 可 能 会 添加 一 些 变 量 到 全 局 作用 域 中 ， 常 常 有 可 能 在 多 个 
变量 声明 中 使 用 相同 的 变量 名 称 ， 从 而 造成 冲突 。 
13.5.1 ”变量 冲突 

至 少 使 用 一 个 全 局 变量 才能 使 模块 在 全 局 发 挥 作 用 ， 但 如 果 同 一 变量 被 多 个 模块 使 用 就 
会 发 生 混战 ? 好 吧 ， 混 战 的 结果 是 最 后 一 个 模块 遍 了 ， 它 会 把 自己 的 值 分 配给 该 变量 。 在 猜 
数字 游戏 代码 中 ， 加 载 了 两 个 使 用 全 局 spacer 变量 的 模块 ， 并 在 程序 中 使 用 该 变量 。 下 面 的 


代码 段 显示 了 第 二 个 spacer 如 何 才 盖 第 一 个 spacer， 导 致 程 序 在 尝试 使 用 spacer.wrap 时 出 现 
错误 。 
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// 第 一 个 模块 的 代码 


Var spacer = { 
11iie. 二 

wrap 

box 


}; 
// 第 二 个 模块 的 代码 


Var Spacer = function (text) { . }; 
// 后 面 的 代码 
spacer.wrap (msg, msg.length + 4, "="); // 错误 ! 找 不 到 spacer .wrap 


如 上 例 所 见 ， 当 一 个 变量 声明 履 盖 了 另 一 个 变量 声明 时 ， 我 们 称 之 为 变量 冲突 ， 结 果 是 
第 二 个 变量 声明 彻底 打败 了 第 一 个 变量 声明 。 现 在 ， 我 们 可 以 理解 为 什么 声明 很 多 全 局 变量 
就 会 污染 全 局 命名 空间 。 因 为 声明 的 变量 越 多 ， 神 突 的 机 会 就 越 大 。 针 对 上 述 问题 ， 本 书 在 
下 一 小 节 将 讨论 如 何 使 用 命名 空间 来 减少 全 局 变量 的 数量 ， 在 第 13.6 节 中 ， 将 讨论 立即 调用 
函数 表达 式 。 
13.5.2 ”通过 使 用 命名 空间 减少 冲突 
spacer 命名 空间 模块 目前 运行 良好 ， 因 为 该 模块 只 使 用 了 一 个 全 局 变量 ， 而 不 是 把 全 局 
变量 分 散 到 line、wrap 和 box 函数 。spacer 命名 空间 使 用 一 个 对 象 作为 命名 空间 ， 并 将 函数 
分 配给 该 对 象 的 属性 ， 然 后 将 对 象 分 配给 单个 变量 spacer。Kallie 为 她 的 模块 所 造成 的 污染 
问题 深 感 抱歉 一 一 她 太 忙 了 ， 玻 忽 了 这 个 问题 ， 现 在 Kallie 用 命名 空间 更 新 了 这 个 模块 ， 如 
以 下 代码 清单 13-12 所 示 。 
入 ”代码 清单 13-12 Kallie 在 命名 空间 中 的 格式 化 代码 
0 (http://jsbin.com/moheka/edit?js,console) 


var kalliesCode = { // 将 函数 封装 在 对 象 中 ， 并 将 对 象 分 配给 单个 全 局 变量 
spreader: function (text, character) { 


return text.split("") .join (chnaracter) ， 
}, 
spacer: function (text) { // 将 spacer 函数 设置 为 命名 空间 对 象 的 属性 


my > 


return kalliesCode.spreader (text, 


} ， 


dasher: function (text) { 


return kalliesCode.spreader (text,"-"); // 使 用 圆 点 运算 符 调用 kalliesCod 
/7 函数 


}; 
请 更 新 猿 数 字 游 戏 的 HTML， 以 便 导 入 Kallie 更 新 后 的 模块 (代码 清单 13-13) ， 更 新 
后 的 JavaScript 代码 从 kalliesCode 命名 空间 (代码 清单 13-14) 中 调用 dasher 函数 。 


代码 清单 13-13 ”导入 Kallie 的 命名 空间 (HTML) 
(http://jsbin.com/seqahi/edit?html,js,console) 


<!-- 数字 生成 器 --> 
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<script src="http://output.jsbin.com/qezoce.js"></script> 
<!-- spacer --> 

<script src="http://output.jsbin.com/juneqo.js"></script> 
<!--Kallie’s code --> 

<script src="http://output.jsbin.com/moheka.js"></script> 


代码 清单 13-14 ”使 用 Kallie 的 代码 


yy (http://jsbin.com/seqahi/edit?html,js,console) 


Var getGuesser = function (lowest, highest) { 


Var secret = between (lowest, highest); 
return function (userNumber) { 


var msg; 


If (userNumber === secret) { 
msg = kalliesCode.dasher ("Well done!");// 从 kalliesCode 命名 空 
// 间 中 调用 qasher 函数 


"="); 


return spacer.wrap (msg, msg.length + 4, 


} else if (userNumber> secret) { 


msg = kalliesCode.dasher ("Too hign!"); 

return spacer.wrap (msg,msg.length+4,"+"); // 顺 利 地 使 用 spacer .wrap 
} else { 

msg =kalliesCode.dasher ("Too low!"); 


return spacer.wrap (msg, msg.length + 4, "-"); 


}; 
}; 
Var guess = getGuesser(5, 10); 
请 按照 清单 所 示 链 接 到 JS Bin， 再 次 运行 程序 ， 就 会 看 到 以 下 显示 。 你 会 发 现 ， 通 过 使 
用 命名 空间 ， 问 题 已 经 得 到 完美 解决 。 


三 二 人 二 | 二 二 


使 用 函数 是 避免 污染 全 局 命名 室 间 的 另 一 种 重要 方式 ， 将 在 下 一 节 讲 述 。 这 种 函数 有 一 
个 好 听 的 名 字 ， 就 是 …… 


13.6 “立即 调用 函数 表达 式 (TIFE) 
立即 调用 函数 表达 式 ? 这 个 标题 看 似 有 点 儿 匪 责 所 思 ， 希 望 它 能 激 起 读者 的 好 奇 心 ， 而 


不 是 迷 习 和 和 荡 惧 。 立 即 调用 函数 表达 式 是 指 程序 可 以 直接 调用 的 函数 ， 即 不 需 使 用 变量 也 可 
以 调用 。 这 样 做 的 意义 何在 ? 
在 第 13.5 节 中 ， 我 导入 了 一 个 由 老 朋 友 Kallie 编写 的 代码 模块 。 但 不 幸 的 是 ，Kallie 程 
序 中 的 全 局 变量 与 我 的 全 局 变量 冲突 ， 并 且 履 盖 了 我 心爱 的 spacer 命名 空间 。 汲 取 这 个 严 习 
教训 ， 我 下 定 决心 要 竭尽 全 力 坎 制 全 局 命名 空间 的 污染 问题 ， 必 须 检 查 代码 ， 找 到 那些 可 以 
删除 的 全 局 变量 。 


nn 
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首先 ， 检 查 在 本 章 前 文中 出 现 的 测验 应 用 程序 。 以 下 代码 清 
全 局 变量 、 局 部 变量 和 接口 对 象 。 


到 代码 清单 13-15 ”随机 测验 问题 包括 两 个 全 局 变量 


显示 了 代码 的 结构 ， 包括 


(http://jsbin.com/ponogi/edit?html,js,console) 


var getQuiz= function () { // 定 义 一 个 函数 来 创建 局 部 作用 域 并 将 其 分 配给 全 局 变 

// 量 getQuiz 
var gqIndex = 0; / /在 函数 内 使 用 var 来 声明 局 部 变量 
= 3 


var questions 


Var getQuestion = function () { : }; 
Var checkAnswer = function (userAnswer) { . }; 
return { // 返 回 一 个 接口 对 象 ， 让 用 户 访问 某 些 函数 


quizMe: getQuestion, 
submit: checkAnswer 
}; 
}; 
var quiz= getQuiz(); // 调 用 getouiz 并 将 返回 的 接口 分 配给 全 局 变量 quiz 


在 以 上 程序 中 ， 声 明了 两 个 全 局 变量 : getQuiz 和 quiz。 在 第 一 行 代码 中 ， 定 义 一 个 函 
数 并 将 其 分 配给 getQuiz， 如 下 所 示 : 


Var getQuiz = function () { . }; 


在 最 后 一 行 代码 中 ， 立 即 调用 了 该 函数 : 


Var quiz = getQuiz () ， 


上 述 代码 中 所 声明 的 getQuiz 是 一 个 全 局 变量 ， 它 就 是 污染 源 。 在 后 续 程序 中 ， 
getQuiz 仅仅 使 用 了 一 次 ， 在 其 他 时 候 它 犹如 一 股 恶 臭 的 气味 四 处 弥漫 。 别 忘 了 ， 任 何 一 个 
全 局 变量 的 存在 都 会 给 其 他 全 局 变量 带 来 风险 。 这 些 全 局 变量 可 能 在 很 小 的 代码 段 中 运行 
良好 ， 但 是 随 着 程序 的 增长 和 模块 的 创建 和 导入 ， 这 些 全 局 变量 就 像 贿 蝶 扇 动 怒 膀 ， 引 发 
程序 全 盘 裔 溃 。 

友情 提示 : 

(1) 尽量 避免 声明 全 局 变量 ， 以 免 污 染 全 局 命名 空间 。 

(2) 可 以 通过 使 用 对 象 作为 命名 空间 的 方法 来 减少 全 局 变量 的 数量 。 

(3) 尽量 在 函数 内 部 声明 局 部 变量 。 

使 用 立即 调用 函数 表达 式 可 以 将 全 局 变量 的 数量 减 半 。 要 理解 如 何 使 用 IIFE 优化 程 
序 ， 请 考虑 以 下 内 容 : 

图 识别 函数 表达 式 

国 调用 函数 

图 立即 调用 函数 表达 式 

国 从 IIFE 返回 信息 
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13.6.1 识别 函数 表达 式 
在 本 书 中 ， 从 第 4 章 就 开始 使 用 函数 表达 式 。 我 们 可 以 将 函数 表达 式 分 配给 变量 和 属 


性 ， 函 数 表达 式 可 以 作为 参数 传递 ， 


还 可 以 从 其 他 函数 返回 函 


var Show = function (message) { 


}; 


var 


}; 


tweets.for 


}): 


console.1og (message 
namespace = { 


show: function (mes 


) > 


sage) I 


console .log (message); 


} 


Each (function (message) { 


console .log (message); 


Var getFunction = function () { 


}; 


var localMessage = 


return function () 


"Hello Local!™"; 
{ 


console.1log (localMessage); 


}; 


我 们 已 经 学 过 使 用 函数 来 创建 可 以 按 需 调 上 
域 ， 因 此 使 用 函数 可 以 隐藏 某 些 变量 
体 做 法 。 
13.6.2 ”调用 哺 数 


调用 函数 需要 使 用 函数 调用 运 


节 中 的 4 个 函数 表达 式 。 


将 参数 放 在 调用 运算 符 
何 值 都 会 蔡 换 该 函数 调用 。 


Show("Hello World!"); 


namespace.sShow("Hello World!"); 


// 被 forEach 自动 调用 


Var Show = getFunction(); 


Show() 


算 符 0， 即 一 对 圆 括号 。 


// 
// 分 配给 - 
// 


个 变量 


// 
// 分 配给 - 
// 


-个 属性 


// 


// 作为 参数 传递 给 forEach 


// 


// 
// 从 一 个 函数 返 
// 


加 


的 代码 块 ， 也 学 过 使 用 函数 来 创建 
量 ， 以 免 用 户 和 其 他 程序 员 对 其 


数 表 达 式 ， 如 下 所 示 : 


帘 探 和 调整 ， 下 面 介 2 


13.6.3 ”立即 调用 函数 表达 式 


其 实 ， 不 需要 为 了 调用 


加 


(function () { 
console.log ("Hello World!"); 


局 部 作用 
绍 具 


下 面 我 们 使 用 圆 括 号 来 调用 上 一 


// 调用 show 函数 
// 调用 show 方法 
// getFunction 返回 一 个 函数 
// 调用 这 个 被 返回 的 函数 
生 该 参 ; 给 函数 。 从 函数 返回 的 任 


一 个 函数 就 专门 将 其 分 配给 一 个 变量 。 只 需 将 该 函数 表达 式 放 在 
括号 内 ， 然 后 在 该 括号 后 面 附加 一 个 函数 调用 运 


算 符 ， 如 下 所 示 : 
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人 
图 13-14 是 对 以 上 代码 的 图 示 。 


function nl 
i ; consoles log (Hello Wor 
WW (Qa 
用 函数 调用 运算 符 () 


轩 中 入 用 没 冯 数 科 关公 
图 13-14 立即 调用 函数 表达 式 


这 个 函数 体内 的 代码 立即 运行 ， 而 且 没 有 使 用 一 个 全 局 变量 。 可 以 说 这 个 函数 表达 式 对 
全 局 命名 空间 没有 造成 任何 影响 。 让 我 们 一 起 来 呼吸 这 无 污染 的 新 鲜 空气 ! 


13.6.4 ”从 IIFE 返回 信息 
我 们 看 到 ， 立 即 调 用 函数 不 仅 可 以 减少 污染 ， 而 且 还 可 以 很 好 地 隐藏 私有 变量 。 其 实 ， 


立即 调用 函数 还 有 更 多 作用 。 如 同 其 他 函数 一 样 ， 立 即 调用 函数 还 可 以 返回 值 ， 例 如 可 以 返 
回 一 个 接口 对 象 ， 通 过 接口 对 象 我 们 可 以 对 函数 内 部 的 秘密 内 容 进行 受 控 访问 (请 注意 必 


须 仔细 考虑 函数 内 部 的 哪些 内 容 可 以 对 外 公开 )。 


以 下 代码 清单 13-16 展示 了 IIFE 如 何 返回 一 个 接口 对 象 ， 并 将 其 分 配给 一 个 变量 。 可 


以 通过 访问 控制 台 上 的 quiz 接口 来 运行 该 程序 ， 如 下 所 示 : 


>quiz.quizMe () 

12 x 12 
>quiz.submit ("144") 
Correct! 


代码 清单 13-16 ”在 测验 应 用 程序 中 使 用 IIFE 
(http://isbin.com/titano/edit?html,js,console) 


var quiz = (function () { // 将 函数 放 在 圆 括 号 内 
var qdqIndex = 0; // 隐 藏 该 函数 内 的 私有 变量 
Var questions = [ . ]; 

Var getQuestion = function () { . }; 
Var checkAnswer = function (userAnswer) { . }; 
return { // 返 回 一 个 公共 的 接口 对 象 


quizMe: getQuestion, 
submit: checkAnswer 
}; 
}) 0O); // 在 上 述 


括号 后 面 附加 一 个 () 来 调用 该 函数 


a 


在 以 上 代码 中 ， 先 定义 一 个 函数 ， 并 立即 调用 该 函数 ， 然 后 将 返回 的 对 象 分 配给 quiz 


忆 


变量 。 从 下 面 对 比 中 可 以 看 到 ， 使 用 立即 调用 函数 表达 式 可 以 减少 使 用 不 必要 的 变量 
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getQuiz。 
我 们 并 没有 采用 以 下 方式 : 


Var getQuiz= function () { 
/* 私有 化 */ 
return interface; 


ys 


Var quiz = getQuiz(); 
而 是 采用 了 以 下 方式 : 
var quiz = (function () { 


/* 私有 化 */ 
return interface; 


}) 0O); 


在 游戏 The Crypt ' 
块 和 立即 调用 函数 表达 式 


， 使 用 了 许多 构造 函数 、 函 数 和 对 象 。 既 然 我 们 已 经 明白 了 使 用 模 
的 优势 ， 那 就 让 我 们 一 起 将 游戏 代码 拆 分 成 模块 吧 ! 


13.7 The Crypt 一 一 将 代码 分 解 成 模块 


正如 本 章 开 始 所 述 ，The Crypt 游戏 的 代码 变 得 越 来 越 长 ， 因 此 非常 有 必要 将 程序 分 解 
成 多 个 模块 。 通 过 学 习 本 章 内 容 ， 我 们 已 经 知道 为 什么 要 将 代码 分 解 成 模块 以 及 如 何 进行 分 
解 ， 现 在 是 一 展 喘 手 的 时 候 了 。 

以 下 代码 清单 13-17 显示 了 5 个 HIML script 元 素 ， 用 于 加 载 不 同 的 模块 ， 从 而 逐步 构 
建 完 整 的 游戏 。 


代码 清单 13-17 为 The Crypt 导入 模块 (HTML) 
(http://jsbin.com/zikuta/edit?html,js,console) 


<! 一 spacer 模块 --> 

xscript sro="http://output. 
<! 一 玩家 构造 器 --> 
<aeript ste="http: /output. 
<! 一 场所 构造 器 --> 
<script src="http://output .j 
<! 一 地 图 代码 --> 
<seript sro="http://outputs] 
<! 一 游戏 初始 化 --> 


<script src="http://output.j 


sbin.com/juneqo.js"></script> 


sbin.com/nubijex.js"></script> 


sbin.com/dofuci.js"></script> 


sbin.com/dipaxo.js"></script> 


sbin.com/fisupe.js"></script> 


请 读者 注意 ，spacer 模块 的 地 址 就 是 其 在 本 章 中 一 直 使 用 的 地 址 ， 这 就 是 模块 的 美妙 之 
处 ! 程序 员 可 以 在 多 个 项 目 中 使 用 同一 个 文件 。 如 果 在 spacer 命名 空间 中 添加 新 的 格式 化 函 
数 ， 那 么 在 已 导入 该 模块 的 所 有 项 目 中 ， 该 函数 会 立即 生效 。 

以 下 代码 清单 13-18 显示 了 启动 游戏 所 需要 的 单行 JavaScript 语句 。 
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代码 清单 13-18 ”为 The Crypt 导入 模块 
(http://jsbin.com/zikuta/edit?html,js,console) 


Var game = theCrypt.getGame (); 


以 模块 化 形式 开始 游戏 应 该 没有 问题 ， 因 为 所 有 功能 都 定义 在 模块 中 ， 仅 仅 一 行 代码 就 
能 够 启动 游戏 。 

除了 spacer， 游 戏 The Crypt 中 其 他 模块 都 共享 一 个 命名 空间 theCrypt (图 13-15)。 通 
过 调用 theCrypt 命名 空间 的 getGame 方法 启动 游戏 : 


theCrypt .getGame (); 


Player spacer 
spacer 模块 使 
Place 个 不 同 的 命名 空间 
Map code 


Game init 


这 些 模块 共享 同 
一 个 命名 空间 
Game Start 
只 需要 一 行 代码 
就 可 以 启动 游戏 
图 13-15 ”游戏 The Crypt 中 导入 了 5 个 模块 ， 其 中 4 个 模块 共享 同一 个 命名 空间 


现在 ， 我 们 知道 使 用 命名 空间 能 够 有 效 减少 全 局 变量 ， 并 且 能 够 对 相关 函数 进行 分 组 。 
下 面 介绍 如 何 让 不 同 模块 文件 中 的 代码 共享 同一 个 命名 空间 。 


13.7.1 ” 跨 模 块 共享 命名 空间 


使 用 本 章 中 学 到 的 内 容 ， 程 序 员 想 要 实现 以 下 操作 : 

国 构成 The Crypt 的 所 有 模块 都 能 够 使 用 同一 个 全 局 命名 空间 theCrypt。 

加 仅 疝 该 命名 空间 分 配 其 他 模块 所 需 的 属性 和 函数 。 

图 将 所 有 其 他 内 容 隐 藏 在 函数 的 局 部 作用 域 中 。 

正如 给 对 象 添加 属性 ， 这 些 模块 给 命名 空间 theCrypt 添加 属性 ， 如 下 所 示 : 


theCrypt .Player = Player; 


既然 众多 模块 要 共享 同一 个 命名 空间 ， 那 么 首先 要 确定 由 哪个 模块 来 创建 这 个 命名 空 
间 。 如 果 程 序 访问 到 未 声明 的 变量 就 会 导致 错误 。 为 了 避免 这 种 错误 ， 程 序 员 特 意 把 声明 
theCrypt 的 模块 排 在 第 一 位 ， 但 是 这 种 为 加 载 模块 排序 的 做 法 显然 很 不 方便 。 好 在 我 们 拥有 
一 个 特殊 的 全 局 对 象 一 一 window。 在 浏览 器 中 ， 所 有 全 局 变量 会 自动 分 配给 window。 
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1. 全 局 对 象 : window 


window 对 象 是 JavaScript 在 浏览 器 中 使 用 全 局 变量 的 一 种 方式 。 读 者 可 以 在 控制 台 提示 


符 下 测试 window 对 象 并 检查 某 变量 是 否 已 经 声明 为 全 局 变量 ， 并 测试 window 对 象 


>var test = "Hi" 
undefined 

>test 

"Hi mm 
>window.test 

"Hi mm 


在 以 上 交互 中 ， 声 明了 一 个 全 局 变量 test， 并 自动 分 配 为 window 对 象 的 属性 。 再 次 回 


到 控制 台 提 示 符 下 ， 尝 试 访问 一 个 不 存在 的 全 局 变量 : 


地 


>theCrypt 
"Can't find variable: theCrypt" 


系统 马上 抛 出 了 一 条 出 错 信息 《尽管 你 的 浏览 器 显示 的 错误 消息 可 能 会 略 有 不 同 )。 


如 果 访 问 window 一 个 尚 不 存在 的 属性 ， 却 不 会 抛 出 错误 信息 ， 而 是 返回 undefined: 


>window.theCrypt 
undefined 


不 会 引起 任何 错误 。 
2. 使 用 window 对 象 来 检查 全 局 变量 


此 可 见 ， 我 们 可 以 使 用 window 对 象 来 检查 theCrypt 是 否 已 经 被 声明 为 命名 空间 ， 这 样 就 


下 一 个 代码 清单 是 Player 模块 ， 将 Player 构造 函数 及 其 外 围 代码 打包 为 一 个 整体 来 实现 


其 模块 化 。 


代码 清单 13-19 ”将 Player 构造 函数 构建 为 模块 
(http://jsbin.com/nubijex/edit?js) 


(function () { // 将 Player 构造 函数 包装 在 一 个 函数 中 以 创建 局 部 作 


] 域 


var Player = function (name，health){ // 不 允许 用 户 接触 到 Player 构造 函数 


/* 程 序 实现 无 变化 */ 
}; 


if (window.theCrypt === undefined) {/ /确保 有 一 个 名 为 theCrypt 的 全 局 命名 空间 


window.theCrypt = {}; 
} 
theCrypt.Player = Player; // 将 Player 构造 函数 分 配给 该 命名 
}) (); / /立即 执行 函数 表达 式 


空间 


在 以 上 代码 清单 13-19 中 ，Player 模块 通过 检查 window 对 象 来 查看 theCrypt 是 否 已 声 


明 为 全 局 变量 。 如 果 Player 模块 找 不 到 theCrypt， 那 么 就 对 其 进行 声明 : 


if (window.theCrypt === undefined) { 


window.theCrypt = {}; 
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} 


旦 该 模块 确定 命名 空间 已 存在 ， 就 将 Player 构造 函数 添加 为 命名 空间 的 一 个 属性 : 


theCrypt .Player = Player; 


我 们 看 到 ， 借 助 全 局 变量 theCrypt，Player 构造 函数 已 经 可 以 供 其 他 代码 使 用 。 
以 下 代码 清单 13-20 显示 Place 模块 ， 同 样 使 用 了 theCrypt 全 局 命名 空间 。 


代码 清单 13-20 ”将 Place 构造 函数 构建 为 模块 
(http://jsbin.com/dofuci/edit?js) 


( 坟 和 EEO ()' 
Var Place = function (title, description) { 
/* 程 序 实现 无 变化 */ 
}; 
if (window.theCrypt === undefined) { 


window.theCrypt = {}; 


theCrypt.Place = Place; // 将 Place 构造 函数 分 配给 该 命名 空间 
}) (0); 


让 每 个 模块 都 检查 theCrypt 是 否 为 window 对 象 的 全 局 变量 ， 这 意味 着 并 不 因为 某 个 模 
块 能 够 创建 命名 空间 ， 就 必须 将 其 放 在 第 一 位 进行 加 载 。 所 有 模块 都 要 检查 theCrypt， 如 果 
第 一 个 加 载 模块 找 不 到 theCrypt 命名 空间 ， 该 模块 会 在 使 用 之 前 先 创 建 theCrypt。 之 后 加 载 
的 模块 在 找到 theCrypt 命名 空间 后 ， 将 模块 作为 属性 分 配给 该 命名 空间 。 

3. 将 命名 空间 属性 分 配给 局 部 变 

命名 空间 能 够 有 效 减少 全 局 变量 ， 但 是 使 用 命名 空间 的 属性 往往 意味 着 要 输入 一 个 很 长 
的 名 字 ， 这 点 让 使 用 者 感到 有 些 麻烦 。 例 如 ， 地 图 代码 模块 需要 在 The Crypt 中 创建 场所 ， 
使 用 5 个 字母 的 Place 构造 函数 即 可 : 


wl 


Var kitchen = new Place ("The Kitchen", "You are in a kitchen.."); 


但 是 现在 将 Place 构造 函数 移动 到 theCrypt 命名 空间 中 ， 对 于 在 地 图 代码 中 更 改 对 Place 
的 所 有 引用 确实 方便 了 ， 然 而 却 需要 输入 13 个 字母 ，theCrypt Place， 如 下 所 示 : 


Var kitchen = new theCrypt.Place ("The Kitchen", "You are in a 


Var library = new theCrypt.Place ("The Old Library", 


kitchen..."); 


"You are in a lib.."); 


事实 上 ， 可 以 通过 创建 一 个 局 部 变量 Place 来 解决 上 述 问题 ， 如 下 所 示 : 


var Place = theCrypt.Place; 


Var kitchen = new Place("The Kitchen", “You are in a kitchen.."); 


如 果 程 序 员 需 要 多 次 使 用 命名 空间 的 某 个 属性 ， 这 是 一 种 可 以 减少 打字 的 好 方法 。 
在 本 章 中 ， 我 们 已 经 学 会 如 何 将 代码 段 移动 到 自己 的 模块 中 ， 下 一 步 可 以 仔细 考虑 每 个 
模块 的 功能 。 当 任务 变 得 更 加 细致 和 具体 时 ， 这 些 模块 还 可 以 分 成 更 小 的 模块 吗 ? 当 程序 中 
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常常 出 现 变化 的 数据 时 ， 我 们 该 使 用 哪些 代码 模式 来 处 理 和 显示 这 些 不 断 变化 的 数据 呢 ? 请 
读者 在 后 续 三 章 内 容 中 寻找 答案 ， 模 型、 视图 和 控制 器 。 


13.8 ”本 章 小 结 


图 将 程序 分 割 成 模块 ， 成 为 可 以 独立 加 载 的 代码 段 。 
国 在 多 个 项 目 中 使 用 相同 的 模块 。 
国 在 JS Bin 中 使 用 HTML 脚本 元 素 加 载 模块 : 


<script src="path/to/module.js"></script> 
图 在 script 元 素 的 src 属性 中 指定 模块 文件 的 位 置 。 
四 变量 冲突 就 是 程序 中 的 一 个 变量 被 另 一 个 变量 覆盖 ， 使 用 命名 空间 和 立即 执行 函数 
表达 式 可 以 减少 变量 冲突 。 
图 如 何 创建 立即 执行 函数 表达 式 ， 在 圆 括号 中 包含 函数 定义 并 附加 函数 调用 运算 符 ()。 


(function () { 
// 立即 执行 的 代码 
}) (); 


国 从 立即 执行 函数 表达 式 返 回 一 个 接口 ， 这 种 方式 称 为 模块 模式 : 


var game = (function () { 
// 以 下 是 局 部 变量 
return 


// 接 口 方法 


}) 0 1 
图 确保 已 经 加 载 了 其 他 模块 所 依赖 的 全 部 模块 。 
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本 章 内 容 包 括 : 

图 从 数据 构建 模型 

图 在 多 个 项 目 中 使 用 相同 的 数据 
图 在 数据 文件 之 间 切 换 

图 在 游戏 The Crypt 中 指定 地 图 数据 


在 第 13 章 中 ， 我 们 学 习 了 如 何 使 用 模块 将 程序 分 解 成 单独 的 文件 。 之 后 ， 就 可 以 独立 
操作 模块 ， 在 模块 之 间 轻 松 切换 ， 并 在 多 个 项 目 中 反复 使 用 这 些 模块 ， 甚 至 可 以 发 布 自己 编 
写 的 模块 ， 并 导入 他 人 已 发 布 的 模块 。 

本 章 继续 坚持 模块 化 和 代码 复 用 的 思想 。 在 本 章 中 ， 读 者 将 学 习 如 何 从 构造 函数 和 函数 
中 移出 数据 。 首 先 ， 读 者 将 学 习 如 何 使 用 简单 的 方式 呈现 数据 ， 以 便 该 数据 可 供 多 个 应 用 程 
序 使 用 ， 不 论 这 些 应 用 程序 是 采用 何 种 语言 编写 。 随 后， 考虑 如 何 将 该 数据 提供 给 构造 函数 
和 函数 ， 以 构建 能 够 添加 额外 功能 的 模型 。 最 后 ， 练 习 为 The Crypt 定义 地 图 数据 ， 为 玩家 
增加 挑战 ， 使 游戏 更 具 吸 引力 。 


14.1 构建 健身 应 用 程序 一 一 数据 和 模型 


作为 健身 应 用 程序 开发 团队 的 一 员 ， 需 要 考虑 以 下 客户 需求 :关注 健康 的 用 户 需 要 跟踪 
他 们 的 锻炼 情况 ， 把 每 次 锻炼 的 日 期 和 持续 时 间 都 记录 下 来 ， 如 下 所 示 。 
Mahesha 


120 minutes on February 5th, 2017 
35 minutes on February 6th, 2017 


2 hours 35 minutes so far. 


Great work! 


程序 开发 团队 正在 使 用 Python 编程 语言 编写 Android 版 本 的 应 用 程序 ， 同 时 使 用 Swift 
编写 iOS 版 本 的 应 用 程序 ， 还 在 使 用 JavaScript 编写 网 页 版 本 的 应 用 程序 ， 以 上 三 个 版 本 的 
应 用 程序 将 使 用 相同 的 数据 ， 如 图 14-1 所 示 。 

构建 以 上 应 用 程序 需要 完成 以 下 任务 : 

(1) 以 字符 串 形 式 检索 用 户 数据 。 

(2) 将 用 户 数据 转换 为 用 户 模型 。 

(3) 显示 用 户 数据 。 

(4) 为 用 户 提供 添加 会 话 的 接口 。 


入 
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服务 器 提供 可 用 的 数据 


健身 应 


User Data 


Android App Web App iOS App 


所 有 应 用 程序 都 使 用 相同 的 数据 
不 同 版 本 的 应 用 程序 都 使 用 相同 的 数据 


图 14-1 


模型 : 使 用 数据 


将 数据 作为 文本 在 互联 网 上 传输 。 文 本 的 格式 是 JSON， 有 关 JSON 的 内 容 将 在 第 20 章 


详 述 。 我 们 将 会 
我 们 现在 专注 于 以 上 第 二 项 任务 : 将 用 户 数 据 转 换 为 用 户 模型 。 


14.1.1 定义 User 构造 函数 


作为 开发 团队 的 一 员 ， 我 们 的 任务 是 编写 JavaScript 代码 ， 为 健身 应 
模型 需要 执行 以 下 操作 : 

(1) 存储 用 户 名 。 

(2) 存储 用 户 每 一 次 锻炼 的 列表 ， 每 次 锻炼 都 包含 日 期 和 持续 时 间 。 

(3) 包含 将 每 次 锻炼 添加 到 列表 的 方法 。 

(4) 包含 用 于 检索 相关 用 户 数据 的 方法 。 

代码 清单 14-1 显示 初始 的 构造 函数 。 在 控制 台 对 它 进行 调试 ， 交 互 如 下 : 


> Var user = new User ("Mahesha") 


undefined 
> user.addSession("2017-02-05", 120) 
120 
> user.addSession("2017-02-06", 35) 
155 
> user.getData() .total 
155 
代码 清单 14-1 ”User 构造 函数 
My http://jsbin.com/suzala/edit?js,console) 
Var User = function (name) { 
var sessions = []; / /声明 私 有 变量 


Var totalDuration = 0; 


到 ， 这 种 文本 格式 很 容易 转换 为 JavaScript 对 象 。 作 为 开发 团 


队 的 一 员 ， 


] 的 用 户 建 模 ， 该 


this.addSession = function (sessionDate, duration) { 
sessions.push ({ // 将 session 对 象 添 加 到 sessions 数组 
"sessionDate" : sessionDate, 
"duration" : duration 


221 


[We 


CD 
© 


JavaScript 开发 实战 


}); 


totalDuration += duration; 


// 将 当前 一 次 锻炼 的 持续 时 间 加 到 总 计时 间 


return totalDuration; 


}; 
this.getData = function () { // 定 义 一 个 函数 ， 用 于 检索 用 户 数 据 


return { 
"name" : name, 
"total" : totalDuration, 
"sessions": sessions.slice() // 使 用 slice 复制 sessions 数组 


}; 
}; 
} 

以 上 User 构造 函数 中 ， 包 括 一 个 name 形 参 、 几 个 使 用 var 声明 的 私有 变量 、 以 及 两 个 
赋值 给 this 对 象 的 公共 方法 addSession 和 getData。getData 方法 使 用 没有 参数 的 slice 来 抓 取 
sessions 数组 的 副本 。 有 关 数 组 方法 〈 如 slice) 的 详细 讲解 ， 请 读者 参阅 第 8 章 内 容 。 提 供 
session 信息 的 副本 可 以 防止 用 户 在 addSession 方法 以 外 的 地 方 对 sessions 数组 的 内 容 进 行 调 
整 。getData 返回 的 对 象 还 包括 一 个 total 属性， 是 多 次 锻炼 的 总 持续 时 间 。 

当 使 用 User 构造 函数 创建 JavaScript 对 象 时 ， 就 创建 了 一 个 用 户 模型 。 模 型 不 仅仅 是 数 


据 ， 还 包括 用 于 管理 数据 的 私有 变量 和 公共 方法 ， 如 图 14-2 所 示 。 


user = new User ( PManesha® ) 
构造 函数 
function (Wasmg) 
返回 值 代替 /* private */ 
了 函数 调用 - 
this.addSession = function (session) { ... }; 


this.getData = function () { ... }; 


特殊 对 象 this 被 返 匠 


user = { 
addSsession: function (session) { ... } 


getData: function () { ... } 


} 
一 个 包括 私有 数据 和 公共 方法 的 用 户 模型 


图 14-2 ”由 User 构造 函数 创建 的 用 户 模型 


既然 模型 不 仅仅 是 数据 ， 那 么 数据 又 是 什么 ? 


14.1.2 ”体会 把 数据 作为 JavaScript 对 象 的 感觉 
以 下 用 户 数 据 就 是 一 个 简单 的 JavaScript 对 象 : 


var userData = { 
"name" : "Mahesha", 
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"sessions™" : |[ 
{ "seessionDate™ » "2017=02=05", “duration™ % 120 +} 
{ "sessionDate™ : "2017-02-06", "duration™ : 35 }, 
{ "sessionDate™ : "2017-02-06", "duration™" : 45 } 


}; 
我 们 可 以 访问 该 对 象 的 属性 ， 例 如 userData.name， 但 是 它 依然 只 是 数据 ， 并 不 具有 横 
型 的 其 他 功能 ， 例 如 由 User 构造 函数 创建 的 用 户 模型 中 的 addSession 或 getData 方法 。 
企图 14-3 中 再 次 展示 了 数据 对 象 ， 以 便 与 图 14-2 进行 比较 。 


沁 


| 


user = { 
name: "Mahesha", 
sessions: [ ... ] 


} 


户 数据 作为 简单 的 JavaScript 对 象 
图 14-3 用户 数据 作为 简单 的 JavaScript 对 象 

正如 在 其 他 编程 语言 中 一 样 ，JavaScript 常常 将 简单 的 对 象 作 为 数据 格式 ， 在 网 络 上 尤 
其 如 此 。 但 是 ， 为 了 充分 利用 用 户 模型 addSession 和 getData 提供 的 额外 方法 ， 我 们 需要 定 
义 一 个 函数 ， 把 基本 数据 对 象 构 建成 为 用 户 模型 。 
14.1.3 ”将 数据 转换 为 用 户 模型 

在 以 下 代码 清单 14-3 中 ， 定 义 了 将 单个 用 户 的 数据 作为 JavaScript 对 象 的 buildUser 函 
数 ， 并 通过 调用 User 构造 函数 来 创建 模型 。 通 过 从 JavaScript 对 象 中 创建 用 户 模 型 来 测试 
buildUser 函数 ， 为 创建 的 用 户 添 加 一 次 额外 的 锻炼 就 会 在 控制 台 上 输出 以 下 信息 : 


人 


> 240 


我 们 正在 使 用 代码 清单 14-1 中 的 User 构造 函数 ， 因 此 可 以 通过 向 项 目 中 添加 script 元 
素 的 方法 (参见 第 13 章 ) 导入 该 构造 函数 ， 如 代码 清单 14-2 所 示 。 


代码 清单 14-2 ”从 用 户 数据 构建 用 户 模型 的 函数 HTML) 
Ny http://jsbin.com/zenire/edit?html,js,console) 


<! 一 用 户 构 造 器 --> 

<script src="http://output.jsbin.com/suzala.js"></script> 
代码 清单 1423 “从 用 户 数据 移 建 用 户 模 型 的 函数 
Wi Chttp://jsbin.com/zenire/edit?html,js,console) 


Var buildUser = function (userData) 1{ 
var user = new User (userData.name); // 使 用 User 构造 函数 创建 新 的 用 户 对 象 


userData.sessions.forEach (function (session) { 


user.addSession( 


session.sessionDate, session.duration); // 添 加 每 一 次 锻炼 
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}); 


return user; 


}; 


Var userData = { 
"name™" : "Mahesha", 
"sessions™” : [ 
{"sessionDate"™": "2017-02-05", 
{"sessionDate": "2017-02-06", 
{"sessionDate": "2017-02-06", 


] 
}; 


Var user = buildUser (userData); 
console.log (user.addSession ("2017-02-15",40)) 


在 以 上 代码 中 ， 通 过 使 用 buildUser 


通用 户 数据 是 一 个 简单 的 JavaScript 


而 且 添 加 了 管理 模型 状态 和 访问 数据 副本 的 方法 。 


14.1.4 下 一 步 日 标 


以 上 应 用 程序 开发 工作 已 经 满足 本 章 的 要 求 ， 现 在 将 该 应 


/ /返回 新 创建 的 用 户 模型 


/ /创建 JavaScript 对 象 以 保存 用 户 数据 


"duration™.: 120}y 
"duration Ys 35+; 


vaduration .ee Ws 


// 调 用 buildUser 从 数据 创建 模型 
; / /添加 一 次 锻炼 


函数 ， 将 普通 用 户 数据 升级 为 增强 的 用 户 模型 ， 


记录 返回 的 总 时 


到 


“加 


对 象 ， 而 增强 的 用 户 模 型 不 但 将 数据 隐藏 为 私有 变量 ， 


(1) 以 字符 串 形式 检索 用 户 数 据 。 
(2) 将 用 户 数据 转换 为 用 户 模型 。 


(3) 显示 用 户 数据 。 


(4) 为 用 户 提供 添加 会 话 的 界面 。 
其 他 几 项 要 求 将 会 在 本 书后 续 内 容 中 得 以 落实 。 


我 们 已 完成 上 述 第 二 项 要 求 ， 其 


来 看 看 游戏 The Crypt， 我 们 是 否 可 
即 从 游戏 The Crypt 场所 模型 中 分 


14.2 The Crypt 一 一 从 游戏 中 分 离 


以 像 在 健身 应 用 中 那样 从 月 
离 出 地 图 数据 ? 


在 本 节 中 ， 我 们 将 把 从 健身 应 有 
以 下 任务 : 


(1) 使 用 基本 的 JavaScript 对 象 来 表示 游戏 中 的 地 图 


(2) 向 地 图 数据 中 的 出 口 添加 挑战 内 容 。 
(3) 使 用 方法 更 新 Place 构造 函数 以 设置 和 获取 挑战 内 容 。 


(4) 编写 一 个 函数 ， 用 来 从 地 图 


数据 构建 场所 模型 。 


月 


出 地 图 数据 
程序 中 学 到 的 知识 应 用 到 游戏 The Crypt 中 ， 主 要 完成 


程序 的 完整 要 求 


[adll 


bea 


三 申 一 下 : 


现在 ， 再 


昌 户 模型 中 分 离 出 月 


日 户 数据 ， 


目前 ， 我 们 已 经 学 会 在 程序 中 采用 以 下 两 个 步骤 手动 构建 The Crypt 地 图 : 在 我 们 创建 


的 每 个 地 方 调用 Place 构造 函数 ， 然 后 通过 调用 方法 来 添加 物品 和 出 口 。 


// 创建 两 个 地 方 
Var kitchen = new Plac 
"The Kitchen", 
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"You are in a kitchen. There is a disturbing smell." 


); 
Var library = new Place 
"The Old Library", 


"You are in a library. Dusty books line the walls." 


); 

kitchen.addItem 
lipbrary.addItem 
kitchen.addExit 
library.addExit 


("a piece of cheese" 
("a rusty key"); // 
(“Sout LIibDrary)s 
( 


"north", kitchen); 


); 


// 单独 添加 物品 


// 单 独 添加 出 
// 


使 用 数据 


在 采用 以 上 方法 创建 的 地 图 中 ， 地 图 数据 (地 点 描述 、 出 口 和 物品 与 创建 游戏 对 象 所 


函数 。 


Var library = new Place 
"The Old Library", 


"You are in a library. Dusty books line the walls." 


); 


使 用 的 JavaScript 捆绑 在 一 起 。 在 代码 中 唯一 可 以 找到 


// 内 部 数据 


但 是 ， 关 于 这 些 地 点 的 出 口 和 物品 详细 信息 与 地 点 本 身 是 相互 分 离 的 。 


在 14.1 节 中 我 们 看 到 ， 当 数据 以 通用 格式 表示 时 ， 程 序 可 以 更 容易 地 


I 地 图 位 置 的 地 方 就 是 调用 Place 构造 


// 构造 函数 


据 ， 因 为 其 他 程序 和 编程 语言 可 以 读 取 已 经 格式 化 为 简 自 
数据 与 构造 函数 分 
addItem 和 addExit〉 等 分 开 ， 就 会 使 定义 新 地 图 、 存 储 、 切 换 和 共享 这 些 地 图 


并 不 能 读 取 Place 对 和 象 。 如 果 能 将 原始 地 图 


很 多 (图 14-4)。 


新 版 本 
目前 版 本 
spacer 
spacer 
Playe 
Player 
Place 
Place 
Map data 
Map code 


Map builder 


Game init 


Game init 


从 构建 Place 对 象 的 
代码 中 分 离 地 图 数据 


图 14-4 ”从 地 图 构建 器 中 拆 分 出 地 图 数 
为 了 实现 以 上 数据 和 游戏 代码 的 分 离 ， 我 们 必须 首先 决定 数据 将 采取 何 种 形式 ， 然 后 编 


写 一 个 函数 将 数据 转换 为 游戏 使 用 的 Place 模型 。 


中 


可 以 针对 不 同 的 冒险 地 点 
轻松 切换 地 图 数据 ， 并 可 
以 与 其 他 应 用 程序 共享 地 
图 数据 


Map2 data 


Map3 data 


居 可 以 使 切换 地 图 变 得 更 加 容易 


单 JavaScript 对 象 的 数据 ， 但 是 
开 ， 与 方法 (例如 


tk 享 这 些 数 


变 得 容易 
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14.2.1 ”地 图 数据 
每 一 个 JavaScript 对 象 将 代表 一 个 地 图 ， 该 对 象 包含 标题 、 地 点 列表 和 开始 位 置 名 称 。 


{ 


bi 
"firstPlace™" : “The Kitchen"™, 
"places" : [ 


// ”place 对 象 的 数组 
}; 
places 数组 中 的 每 个 地 方 也 将 是 一 个 对 象 。 以 下 代码 段 显示 了 一 个 这 样 的 地 方 : 


{ 


"title” : "The Kitchen", 
"description™" : "You are in a kitchen. There is a disturbing smell.", 
"items" : [ "a piece of cheese" ]， 
vexits™ zs |[ 
{ "direction™ 3» MSouth®y "to "The Old Library™. }, 
{ “direction™ 2 "west"; “to™ : "The Kitehen Garden™ +}; 
{ "direction™" : "east", "to" : "The Kitchen Cupboard" } 


}; 
我 们 可 以 看 到 ， 每 个 出 口 是 一 个 对 象 ， 属 性 为 出 口 方向 以 及 该 出 口 所 指向 地 方 的 标题 。 
这 样 的 数据 是 紧凑 的 、 可 读 的 ， 并 且 可 以 保持 物品 和 出 口 与 它们 所 属 的 地 方 在 一 起 。 
以 下 列表 显示 了 地 图 数据 的 一 部 分 ， 在 JS Bin 上 可 见 4 个 位 置 的 完整 代码 。 


代码 清单 14-4 ”地 图 数据 
(http:/jsbin.com/qonoje/edit2js,console) 


Var mapData = { 
"title™" ; “The Dark House", // 给 每 张 地 图 一 个 标题 
"firstPlace"” : "The Kitchen"， // 在 地 图 中 包含 第 一 个 位 置 的 标题 
"Lacesy 3 [ // 列 出 places 数组 中 的 所 有 Place 对 象 
"title" : "The Kitchen", 
"description":"You are in a kitchen.There is a disturbing smell.", 
"items" : [ "a piece of cheese™ ], 
"exits"” : [ 
{ "directiom™s "south,;, "to "The. Old Library™ }y 
{ "dixrection"™; "west”, "to": “The Kitehen Garden™ 1}; 
{ "direction": "east", "to": "The Kitchen Cupboard" } 
] 
}, 
{ 
"title" : "The Old Library", 
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"description":"You are in a library.Dusty books line the walls.", 


"items" : [ "a rusty key"” ], 
"exits"” : [ 
{ "dLreetLionY 3 Moeth yr to 2s Tie Ritoenenmn. 

] 
}, 
{ 

"title" : "The Kitchen Garden"，/* JS Bin 上 有 完整 代码 */ 
}, 
{ 

"title" : "The Kitchen Cupboard"，/* JS Bin 上 有 完整 代码 */ 


}; 


以 上 地 图 数据 只 是 对 每 个 地 方 的 描述 ， 构 建 Place 模型 将 会 为 其 增添 程序 所 期 望 的 


功能 。 
14.2.2 
在 游 
拾 起 这 些 
假 ， 过 于 
为 了 
到 一 个 问 


这 个 
的 物品 : 


如 果 
找到 所 需 
所 有 
如 下 所 示 


向 The Crypt 地 图 数据 添加 挑战 


戏 The Crypt 中 ， 玩 家 可 以 探索 新 奇 的 世界 ， 可 以 在 异国 他 乡 发 现 物品 ， 而 且 可 以 
物品 ， 并 据 为 己 有 。 听 上 去 很 不 错 ， 但 是 似乎 缺 了 点 儿 什 么 。 这 样 的 冒险 更 像 是 度 
轻松 自在 了 ,缺少 了 点 儿 刺 激 。 冒 险 ， 就 需要 接受 挑战 ! 

使 游戏 更 有 趣 ， 我 们 在 出 口 处 增加 了 挑战 。 即 当 玩 家 试图 去 某 个 方向 时 ， 可 能 会 遇 
题 需要 解决 。 游 戏 交 互 如 下 所 示 : 


> game.go ("south") 
*** A Zombie sinks its teeth into your neck. *** 


> game.use ("a piece of cheese south") 


*** The Zombie is strangely resilient. *** 

> game.use ("holy water south") 

*** The Zombie disintegrates into a puddle of putrid goo. *** 
> game.go ("south") 

The Old Library 

You are in The Old Library... 


挑战 阻止 玩家 向 南 继续 前 进 。 为 了 迎接 该 挑战 ， 玩 家 必须 在 此 方向 上 使 用 一 个 特定 


game.use ("holy water south") 


玩家 手中 没有 上 述 必要 的 物品 ， 就 必须 去 其 他 方向 冒险 ， 应 对 其 他 挑战 ， 直 到 玩家 
要 的 物品 。 那 么 ， 我 们 应 该 如 何在 游戏 中 创建 挑战 ? 
关于 The Crypt 中 的 冒险 信息 都 需要 呈现 在 地 图 数据 中 。 目 前 ， 出 口 信息 很 简单 


{ "direction™ 有 to™ 3 Mhie. Old Library” } 
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以 上 出 口 信息 中 ， 包 含 一 个 方向 和 一 个 目的 地 标题 。 要 给 某 个 特定 出 口 添 加 挑战 ， 就 要 
添加 一 个 challenge 属性 ， 如 下 所 示 : 


{ 
QTEGCELOR Si 
"to™" : "The Old Library", 
"challenge" : { 
"message" : "A zombie sinks its teeth into your neck.", 
"success" : "The zombie disintegrates into a puddle of goo.", 
"failure" : "The zombie is strangely resilient.", 
"requires" : "holy water", 
"itemConsumed" : true, 
"damage" : 20 
} 
} 


表 14-1 列 出 challenge 对 象 的 各 个 属性 及 其 含义 ， 以 及 该 属性 是 否 必需 。 


表 14-1 challenge 的 各 个 属性 


属性 含义 是 否 必需 
message 当 玩 家 试图 朝 该 出 口 方向 前 进 时 显示 给 玩家 的 消息 ， 告 诉 玩家 需要 应 对 的 挑战 是 
success 当 玩 家 使 用 了 需要 应 对 挑战 的 物品 时 ， 向 玩家 显示 的 消息 是 
failure 当 玩 家 使 用 错误 的 物品 来 应 对 挑战 时 ， 向 玩家 显示 的 消息 是 
requires 应 对 挑战 所 需 的 物品 是 
itemConsumed 物品 被 使 用 后 是 否 从 玩家 的 物品 列表 中 将 其 删除 否 
damage 在 玩家 应 对 挑战 之 前 就 试图 从 出 口 方 向 前 行 时 ， 从 玩家 的 健康 中 减 去 的 量 和 否 


为 了 应 对 以 上 这 些 挑战 ， 我 们 需要 更 新 Place 构造 函数 。 


14.2.3 ”更 新 Place 构造 国 数 来 应 对 挑战 


我 们 必须 更 新 Place 模型 来 存放 这 些 挑战 。 首 先 ， 需 要 一 个 对 象 来 存储 这 些 挑战 ， 另 外 
还 需要 方法 addChallenge 和 getChallenge， 为 指定 方向 添加 和 检索 挑战 。 人 代码 清单 14-5 显示 
了 Place 构造 函数 的 更 新 之 处 。 


代码 清单 14-$ ” 带 有 挑战 的 Place 构造 函数 


Wy (http://jsbin.com/ruviso/edit?js,console) 


Var Place = function (title, description) { 


// 其 他 变量 
var challenges = {}; / /创建 一 个 空 对 象 来 存储 任何 挑战 
// 其 他 方法 


this.addChallenge = function (direction, challenge) { 
// addchallenge 方法 为 指定 方向 存放 一 个 挑战 
challenges[direction] = challenge; 


}; 
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this.getChallenge=function (direction){ 


return challenges[direction]; 


}; 
}; 
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//getchallenge 方法 返回 指定 
// 方 向 所 存储 的 挑战 


在 以 上 代码 中 ， 首 先 创建 一 个 私有 对 象 challenges 来 存储 任何 挑战 。 如 同 出 口 〈exits ) 
一 样 ， 我 们 使 用 方向 〈direction) 作为 存储 挑战 (challenges) 的 键 〈keys) 。 例 如 ， 玩 家 在 


向 南 移动 之 前 必须 应 对 挑战 ， 挑 战 的 细节 将 存储 在 challenges["south"] 中 


为 了 存储 挑战 ， 需 要 使 用 addChallenge 方法 ; 为 了 在 指定 方向 检索 挑战 ， 需 要 使 用 


getChallenge 方法 。 


14.2.4 ”使 用 地 图 数据 构建 游戏 地 图 


一 < 


去 将 地 图 转换 为 一 组 场所 模型 。 


The Crypt 的 实现 使 用 了 Place 构造 函数 创建 的 模型 ， 该 模型 与 各 出 口 相连 。 既 然 地 图 数 


据 不 再 与 游戏 逻辑 绑 定 ， 那 么 我 们 需要 一 种 方 


我 们 编写 名 为 buildMap 的 函数 ， 该 函数 将 地 图 数据 对 象 作 为 参数 ， 创 建 地 点 模型 ， 该 


模型 与 各 出 口 相连 。 该 函数 返回 


Var firstPlace = buildMap (mapData); 


14-5 显示 buildMap 函数 如 何 两 次 使 用 forEach: 首先 创建 地 点 模型 ， 然 后 通过 添加 


出 口 来 连接 各 模型 。 


firstPlace = buildMap ( mapData ) 


firstPlace = 


图 14-5 


首 多 


地 图 上 的 第 一 个 地 点 模型 就 是 游戏 的 起 点 : 


function ( mapData ) 
var placesStore = {}; 
var buildPlace function (placeData) {...}; 


Var buildExits 


mapData.places.forEach (buildPlace) 


了 


mapData.places.forEach (buildExits); 


function (PlaceData) {...}; 


创建 所 有 地 点 模 
型 ， 并 将 它们 添 
加 到 场所 仓库 


通过 各 出 口 
将 地 点 模型 
彼此 相连 


return placesStore[mapData.firstPlacel]; 


返回 值 是 游戏 的 起 点 


E， 创 建 所 有 的 地 点 模型 ， 然 后 通过 其 


LI 


口 相互 连接 
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buildMap 函数 的 代码 如 代码 清单 14-6 所 示 ， 运 行 步骤 如 下 所 示 : 
(1) 为 每 个 地 点 创建 模型 (buildPlace )。 
a 用 标题 和 描述 调用 Place 构造 函数 
b 将 所 有 物品 添加 到 新 创建 的 地 点 模型 
c 将 地 点 模型 放 入 地 点 仓库 中 
(2) 为 每 个 地 点 添加 出 口 和 挑战 (buildExits ) 。 
a 从 地 点 仓库 中 检索 地 点 模型 
b 为 地 点 数据 中 的 每 个 模型 添加 出 口 
c 为 地 点 数据 中 的 每 个 出 口 添加 挑战 
(3) 返回 模型 是 游戏 的 起 点 。 


和 。 代 码 清单 14-6 地 图 构建 器 
加 (http://jsbin.com/paqihi/edit?js,console) 


Var buildMap = function (mapData) { 
Var placesStore = {}; 
Var buildPlace = function (placeData) { 
var place = new theCrypt.Place(// 步 又 1a: 用 标题 和 描述 调用 Place 构造 函数 
placeData.title, 


placeData.description 
); 
if (placeData.items !== undefined) { // 步 骤 1b: 将 所 有 物品 添加 到 新 
/ /创建 的 地 点 模型 


placeData.items.forEach (place.addItem); 


} 
placesStore[placeData.title] = place; // 步 又 2a: 从 地 点 仓库 中 检索 地 


// 点 模型 
}; 
Var buildExits = function (placeData) { 
var here = placesStore[placeData.title];// 步 又 2b 为 地 点 数据 中 的 每 个 模 
// 型 添加 出 


if (placeData.exits !== undefined) { 


placeData.exits.forEach (function (exit) { 
Var there = placesStore[exit.tol]; 
here.addFExit (exit.direction，there); // 步 又 2c: 为 地 点 数据 中 
// 的 每 个 出 口 添加 一 个 挑战 
here.addChallenge (exit.direction, exit.challenge); 


}); 


}; 

mapData.places.forEach (buildPlace); // 开 始 步骤 1: 为 每 个 地 点 创建 一 个 模型 

mapData.places.forEach (buildExits); / /开始 步骤 2: 为 每 个 地 点 添加 出 

return PlacesStore [mapData.firstPlacel]'， // 步 骤 3: 返回 游戏 中 第 一 个 位 置 
// 的 模型 
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在 以 上 代码 中 ，buildPlace 函数 通过 使 用 Place 构造 函数 将 单个 地 方 的 数据 转换 为 地 点 模 
型 。 请 注意 ， 游 戏 模块 中 使 用 了 全 局 命名 空间 theCrypt (参见 第 13 章 )， 所 以 通过 
theCrypt.Place 可 以 访问 构造 函数 。 首 先 要 保证 所 有 的 地 点 模型 都 已 经 创建 完毕 ， 然 后 才 可 以 
通过 出 口 让 它们 彼此 相连 。 通 过 使 用 forEach 迭代 mapData.places 数组 ， 可 以 为 地 图 数据 中 
的 每 个 地 点 调用 buildPlace， 如 下 所 示 


1 


二 
“0 


mapData.places.forEach (buildPlace); 


在 buildPlace 中 ， 将 创建 的 每 个 地 点 都 添加 到 placesStore 对 象 。buildExits 函数 将 每 个 地 
点 的 数据 分 配给 参数 placeData， 并 从 placesStore 中 获取 与 之 匹配 的 地 点 模型 ， 如 下 所 示 : 


Var here = placesStore[placeData.titlel; 


以 上 语句 中 ， 将 该 模型 分 配给 here 变量 。 因 为 地 点 模型 中 有 一 个 addExit 方法 ， 所 以 可 
以 使 用 here.addExit 为 当前 模型 添加 出 口 。 出 口 数据 如 下 所 示 : 


"exits"” : [ 
{ drrection Ts? Vouth"™; 
"EO. "Theé. OL Llbraryy 
"challenge™ : { 
"message" : "A zombie sinks its teeth into your neck.", 
"Success" : "The zombie disintegrates into a puddle of goo."， 
"failure" : "The zombie is strangely resilient.", 
"requires”" : "holy water", 
"itemConsumed" : true, 
"damage™" : 20 
} 
}, 
{ "direction": "west", "to": "The Kitchen Garden™ }, 
{ "direction": "east", "to": "The Kitchen Cupboard" } 


] 


buildExits 通过 出 口 数据 得 以 运行 ， 并 为 其 找到 的 每 个 出 口 调用 addExit 和 
addChallenge， 如 下 所 示 : 


placeData.exits.forEach (function (exit) { 


Var there = placesStore[exit.tol]; 


here.addExit (exit.direction, there); 
here.addChallenge (exit.direction, exit.challenge); 


}); 


在 以 上 代码 中 ， 每 个 出 口 的 to 属性 给 出 了 该 出 口 所 指向 目的 地 的 标题 。 因 此 ， 通 过 使 
用 exit.to 作为 键 ， 可 以 在 placesStore 中 找到 该 出 口 所 指向 目的 地 的 模型 。 
无 论 地 图 数据 中 是 否 存在 挑战 ， 我 们 都 可 以 向 出 口 添 加 挑战 ， 如 下 所 示 : 


here.addChallenge (exit.direction, exit.challenge); 


如 果 在 地 图 数据 中 某 个 出 口 并 没有 挑战 ， 那 么 exit.challenge 的 值 为 undefined。 在 第 16 
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章 ， 我 们 将 编写 挑战 的 代码 。 请 注意 ， 在 使 用 挑战 之 前 ， 应 该 先 检查 该 挑战 是 否 未 定义 。 
通过 为 每 个 地 点 调用 buildPlaces 和 buildExits， 我 们 已 经 创建 了 一 个 相互 联系 的 地 点 模 
型 地 图 ， 供 勇敢 的 冒险 家 去 探索 。 他 们 能 如 期 找到 财富 与 梦想 ， 发 现 人 生 的 启迪 吗 ? 还 是 会 
遭遇 厄运 ? 无 限 可 能 在 向 他 们 招手 。 无 论 如 何 ， 他 们 需要 从 某 个 地 方 开始 启程 ，buildMap 函 
数 的 返回 值 就 是 地 图 上 第 一 个 地 点 模型 ， 代 码 如 下 : 


return placesStore[mapData.firstPlacel]; 


我 们 已 成 功 地 将 地 图 数据 与 游戏 实施 分 离 。 这 些 数据 现在 是 一 种 可 以 跨 项 目 和 跨 编程 语 
言 ， 可 以 重复 使 用 的 数据 形式 。 

如 果 单 击 代 码 清单 14-6 的 JS Bin 链接 ， 就 会 看 到 完整 的 代码 ， 该 程序 将 buildMap 函数 
包装 在 一 个 可 以 立即 调用 的 函数 表达 式 中 ， 并 将 buildMap 赋值 给 全 局 命名 空间 theCrypt。 因 
为 这 部 分 与 其 他 所 有 模块 的 运行 机 制 相同 ， 所 以 并 没有 显示 在 本 书 的 代码 清单 中 。 


14.2.5 ”运行 游戏 
我 们 需要 对 游戏 初始 化 模块 进行 一 个 微小 的 调整 ， 即 对 buildMap 的 调用 进行 更 新 ， 具 
体 做 法 是 从 新 的 地 图 数据 模块 为 buildMap 函数 传递 数据 。 


代码 清单 14-7 使 用 新 的 地 图 构建 器 
(http://jsbin.com/mogano/edit?js,console) 


var getGame = function () { 
Var render = function () { ... }; 
var firstPlace = theCrypt.buildMap (theCrypt.mapData);  // 将 地 图 数据 
// 传 递 给 puilgdMap 函数 
Var player = new theCrypt.Player ("Kandra", 50); 
player.addIitem("The Sword of Doom"); 


player.setPlace (firstPlace); 
render () 
// 返 回 公 共 接 
return { 
go: function (direction) { .1}, 
get: function () { ... } 


}; 
}; 
buildMap 函数 的 返回 值 为 冒险 的 起 点 ， 并 将 其 设置 为 玩家 的 初始 位 置 。 
另外 ， 还 需要 添加 一 个 HIML script 元 素 ， 用 来 在 该 游戏 中 导入 地 图 数据 模块 。 以 下 代 
清单 14-8 显示 了 本 游戏 的 最 新 版 在 HTML 面板 上 的 内 容 。 


代码 清单 14-8 ”使 用 地 图 构建 器 (HTML) 
(http://jsbin.com/rulayu/edit?html,console) 


= 
| 
一 < 
TH 
上 


<!-- spacer --> 
<script src="http://output.jsbin.com/juneqo.js"></script> 
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<!-- 鞠 家 构建 器 --> 

<script src="http://output.jsbin.com/nubijex.js"></script> 
<!-- 地 点 构建 器 --> 

<script src="http://output.jsbin.com/ruviso.js"></script> 
<!-- 地 图 数据 (以 带 有 挑战 的 厨房 为 例 ) --> 

<script src="http://output.jsbin.com/jayici.js"></script> 
<!-- 地 图 构建 器 --> 


<script src="http://output.jsbin.com/paqihi.js"></script> 
<! -游戏 初始 化 --> 
<script src="http://output.jsbin.com/mogano.js"></script> 
试 着 运行 一 下 吧 ! 游戏 操作 应 该 还 像 以 前 一 样 ，game.go 和 game.get 这 两 个 命令 依然 可 
]。 不 必 担 心 遭遇 僵尸 (其 实 伪 尸 还 在 ， 只 不 过 它们 潜伏 在 地 图 数据 的 阴影 里 ， 让 你 根本 不 
会 察觉 )。 在 第 16 半 ， 我 们 将 学 习 把 挑战 也 并 入 到 游戏 当中 。 
地 图 数据 与 地 图 构建 代码 分 离 的 做 法 可 以 使 数据 在 地 图 之 间 更 容易 切换 。 正 因为 我 们 
经 做 好 了 这 样 的 分 离 ， 所 以 以 下 这 款 游 戏 就 可 以 保持 游戏 代码 不 变 ， 而 上 只 需要 更 新 一 个 地 
文件 。( 这 是 一 个 古老 的 绝地 求生 地 图 戏法 1) 
THE SPARROW 
地 图 数据 : http://jsbin.com/woniqo/edit?js 
游戏 : http://jsbin.com/dequzi/edit?console 
在 下 一 章 内容 中 ， 我 们 将 进一步 贯彻 模块 化 思路 ， 将 玩家 和 地 点 的 显示 与 其 模型 
分 离开 。 


et 


I 上 


y 


了 


14.3 本章 小 结 


以 一 种 易于 在 各 项 目 、 应 用 和 编程 语言 之 间 重 复 使 用 的 形式 来 表示 数据 。 简 单 的 
JavaScript 对 象 是 在 网 络 上 交换 数据 的 常用 格式 。 

图 将 数据 与 程序 逻辑 分 离 ， 以 便 程序 能 够 更 容易 地 切换 数据 源 。 

国 定义 一 些 模 型 ， 首 过 添加 功能 和 隐藏 私有 变量 来 增强 数据 的 可 用 性 ， 为 程序 的 其 他 

部 分 使 用 该 模型 做 好 准备 。 

国 定义 一 些 函 数 ， 从 数据 创建 模型 。 
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本 章 内 容 包括 : 
图 使 用 视图 呈现 数据 


图 从 构造 函数 中 删除 显示 信息 的 代码 
图 将 同一 模型 传递 到 多 个 视图 


控制 台 并 不 是 唯一 可 以 为 用 户 显 示 信息 的 地 方 。 我 们 希望 看 到 程序 能 够 在 网 页 上 输出 数 


据 ， 或 者 在 电脑 桌面 、 手 机 应 用 程序 、 
制 台 上 ， 也 希望 输出 格式 能 够 灵活 多 样 ， 我 们 不 仅 想 看 到 一 个 简单 的 文本 版 本 ， 还 想 看 到 一 


电子 邮件 和 打印 文件 中 输出 数据 。 即 使 信息 显示 在 控 


一 


个 带 有 方 框 和 边框 的 花 式 版 本 。 可 是 ， 我 们 又 不 想 仅仅 为 了 改变 输出 形式 就 重新 编写 大 部 分 


的 程序 。 


视图 是 专注 于 显示 信息 的 代码 模块 ， 这 些 模块 获取 数据 ， 并 基于 数据 创建 可 视 化 输出 。 


视图 可 能 会 包含 按钮 和 文本 框 等 控件 ， 相 关内 容 将 留 至 本 书 第 三 部 分 讲解 。 在 编程 中 ， 我 们 
可 以 将 显示 信息 的 代码 移动 到 视图 中 ， 如 同 模型 的 构造 函数 一 样 。 这 样 做 可 以 达到 以 下 效 


果 : 无 需 更 改 代码 的 其 他 部 分 ， 就 可 以 按 需 切换 输出 类 型 ， 并 且 以 多 种 方式 显示 数据 。 


在 本 章 中 ， 我 们 将 在 两 个 示例 (健身 应 用 程序 和 游戏 The Crypt〉 的 环境 中 创建 视图 。 
对 于 健身 应 用 程序 ， 我 们 将 构建 一 个 简单 版 的 控制 台 视 图 ， 然 后 使 用 spacer 命名 空间 构建 格 
式 升 级 版 本 。 对 于 The Crypt， 我 们 把 原来 在 Player 和 Place 构造 函数 中 显示 信息 的 代码 分 离 


来 ， 将 其 移动 到 新 的 玩家 和 场所 视图 代码 中 


我 们 在 本 书 第 二 部 分 一 直 追 求 代码 模块 化 ， 看 似 是 一 番 痛 苗 的 剖 熬 ， 但 模块 化 能 够 使 简 


单 的 代码 块 在 各 个 项 目 中 自由 穿梭 ， 提 高 更 新 功能 的 灵活 性 。 这 些 灵活 便利 性 让 我 们 感到 欣 


慰 。 横 块 化 的 美丽 前 景 正 在 向 我 们 招手 ! 


1S.1 健身 应 用 程序 一 一 显示 最 新 的 用 户 数 据 


我 所 在 的 团队 正在 编写 一 个 多 平台 健身 应 用 程序 ， 让 用 户 记录 他 们 的 锻炼 情况 。 构 建 i 


应 用 程序 包括 以 下 任务 : 


XE 


《1) 以 字符 串 形式 检索 用 户 数 据 。 
(2) 将 用 户 数 据 转 换 为 用 户 模 型 。 


(3) 显示 用 户 数据 。 


(4) 为 用 户 提供 添加 会 话 的 接口 。 


我 们 已 经 设法 完成 了 作 


共有 附加 功能 的 用 户 模型 ， 


E 务 (1) 和 任务 (2)， 将 用 户 数据 从 简单 的 JavaScript 对 象 转换 为 
包括 了 addSession 和 getData 方法 (参见 第 14 章 )。 下 面 ， 我 们 


来 完成 任务 (3)， 即 显示 用 户 数据 。 
我 们 将 创建 两 个 视 
了 不 同 的 视图 如 何 使 用 同一 个 模型 来 产 4 


图 ， 用 于 接收 用 户 模型 代码 和 显示 模型 


AA 


第 15 章 


控制 


用 户 模 型 


HTML 视 图 


升级 版 视图 


E 不 同 的 输出 。 


Mahesha 
35 minutes on February 5th 
» 45 minutes on February 6th 
台 视 图 
1 hour 20 minutes so far. 
Great work! 


Mahesha 
35 minutes on February 5th 
45 minutes on February 6th 


1 hour 20 minutes so far. 


六 次 闪闪 次 突 安 宙 突 安详 实 风 燃 


突 实 实 突 次 奖 突 实 次 突 容 突 突 实 家 


<h2>Mahesha</h2> 

<ul> 

<li>35 minutes on February 5th</1i> 
<li>45 minutes on February 6th</1i> 
</ul> 

<p>1 hour 20 minutes so far.</p> 
<p><strong>Great work!</strong></p> 


名 


不 同 视图 


13-1 


使 用 同一 


户 模 型 产生 不 同 的 输出 


目前 ， 我 们 一 直 在 使 用 控制 台 视 图 
， 以 便 在 网 页 上 输出 。 

15.1.1 创建 第 一 个 健身 应 用 视图 
健身 应 用 程序 的 第 一 个 视 


Mahesha 


35 minutes 


图 


on 2017-02-05 
on 2017-02-06 


so far 


45 minutes 
80 minutes 
Well done! 


要 生成 以 上 输出 ， 


Var user = new User ("Mahes 
user.addSession ("2017-02-0 
user.addSession ("2017-02-0 


userView.render (user); 


在 代码 清单 


图 简洁 明了 ， 在 控制 台 上 显示 


15-1 中 ， 定 义 并 立即 执行 创建 用 户 视图 的 函数 ， 返 回 一 个 简 上 


视图 : 显 


示 数 据 


的 数据 代码 。 图 15-1 显示 


， 在 本 书 的 第 三 部 分 ， 我们 将 学 习 生 成 HTML 视 


] 户 信息 ， 如 下 所 示 : 


需要 一 个 视图 和 一 个 用 户 模型 : 


// 创 建 一 个 


ha"); 户 模型 
5"%, 35); 


6", 45); 


// 将 模型 传递 到 视图 进行 显示 


的 接 


将 接口 分 配给 userView 变量 。 要 测试 该 视图 ， 请 调用 userView.render， 就 会 生成 上 述 显示 。 


到 代码 清单 15-1 


Var User = function (name) 


Var userView = 


(function 


一 个 简单 的 用 户 视 图 
(http://jisbin.com/goqinep/edit?js,console) 


{ /* 与 第 14 章 相同，JS Bin 上 有 显示 */ }; 
| // 使 用 函数 表达 式 创建 局 部 作 | 


] 域 
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var getInfo=function (userData) { // 定 义 函数 ， 从 用 户 数据 构建 一 个 信息 字符 串 


Var infoString = "\n" + userData.name + "\n"; 


userData.sessions.forEach(function (session) { 


infoString += session.duration + " minutes on ™; 
infoString += session.sessionDate + "\n"; 
}); 
infoString += "\n" + userData.total + " minutes so far"; 
infoString += "\nWell donel!\n"; 


return infoString; 


}; 


var render = function (user) { // 定 义 render 函数 来 输出 用 户 模型 的 信息 
console.log(getIinfo (usez.getData() ) ) ， 
}; 
return { // 返 回 可 以 访问 render 函数 的 简单 接口 对 象 
render: render 
}; 
站 人 /7 立即 执行 圆 括号 内 的 函数 表达 式 
var user = new User("Mahesha") ; / /创建 用 户 模型 并 添加 两 个 会 话 


user.addSession ("2017-02-05", 35); 
user.addSession ("2017-02-06", 45); 
自 


userView.render (user); // 显 示 用 户 信息 
以 上 代码 中 ， 将 视图 代码 包 囊 在 立即 执行 函数 表达 式 中 来 创建 局 部 作用 域 ， 这 样 做 可 以 
隐藏 实施 细节 ， 也 不 需要 额外 的 全 局 变量 《有关 IEE 和 全 局 污染 危险 的 更 多 信息 ， 请 参见 
第 13 章 )。 
代码 的 开头 部 分 是 在 第 14 章 出 现 的 用 户 模型 User 构造 函数 。 用 户 模型 提供 了 getData 
方法 ， 该 方法 返回 一 个 简单 的 JavaScript 对 象 : 


{ 


"name™" : "Mahesha", 

TEotalL™s 280, 

"sessions" : [ 
{ "sessionDate™ : "2017-02-05", "duration™ : 35 }, 
{ "sessionDate™ : "2017-02-06", "duration™” : 45 } 


} 


视图 中 的 getInfo 函数 使 用 该 数据 对 象 来 构建 代码 清单 15-1 前 面 显示 的 信息 字 
如 果 我 们 面前 呈现 了 两 个 视图 ， 我 们 会 依据 什么 标准 而 选择 其 中 之 一 ? 
15.1.2 ”使 用 模块 切换 健身 应 用 视图 
最 终 ， 我 会 向 团队 成 员 展 示 一 些 视图 ， 请 他 们 从 中 选择 最 适合 健身 应 用 使 用 的 产品 。 我 
的 第 二 个 视图 中 使 用 了 spacer 命名 空间 中 的 格式 化 函数 向 输出 信息 添加 边框 和 方 框 。 该 函数 
的 名 称 为 fitnessApp.userViewEnhanced。 读 者 可 以 在 JS Bin 上 (http://jsbin.com/puculi/edit?js,， 
console) 看 到 该 视图 的 代码 模块 ， 输 出 如 下 所 示 : 


串 。 


3 
es 
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第 15 章 视图 : 


Mahesha 

35 minutes on 2017-02-05 
45 minutes on 2017-02-06 
80 minutes so far 


大 大 炎炎 炎炎 类 炎炎 火炎 炎炎 大 


* Well done! * 


类 大 大 大大 类 大 大 大 大 大 大 大 大 


显示 数据 


(第 二 个 视图 的 代码 与 第 一 个 视图 的 代码 类 似 ， 因 为 我 们 的 关注 点 是 如 何 使 用 多 个 视 


图 ， 所 以 本 书 中 省 略 了 第 二 个 视图 的 代码 。) 


以 下 代码 清单 15-2 显示 了 用 于 导入 spacer 和 fitnessApp 模块 的 HTML script 元 素 。 请 注 


意 ， 需 要 导入 两 个 视图 模块 。 


代码 清单 15-2 ”测试 两 个 用 户 视图 (HTML) 
(http://jsbin.com/vamuzu/edit?html,js,console) 


<!-- spacer --> 

<script src="http://output.jsbin.com/juneqo.js"></script> 
<!-- fitnessApp.User --> 

<script src="http://output.jsbin.com/fasebo.js"></script> 
<!-- fitnessApp.userView --> 

<script src="http://output.jsbin.com/yapahe.js"></script> 
<1!-- fitnessApp.userViewEnhanced --> 

<script src="http://output.jsbin.com/puculi.js"></script> 


以 下 代码 清单 15-3 显示 了 JavaScript 代码 ， 用 于 测试 我 们 所 创建 的 两 个 视图 。 


代码 清单 15-3 ”测试 两 个 用 户 视 图 


(http://jsbin.com/vamuzu/edit?html,js,console) 


Fr 


var user = new fitnessApp.User ("Mahesha"); / /创建 用 户 模 型 并 添加 两 个 会 话 


user.addSession ("2017-02-05", 35); 
user.addSession ("2017-02-06", 45); 


fitnessApp.userView.render (user); // 测 试 第 一 个 用 户 视图 
fitnessApp.userViewEnhanced.render (user); // 测 试 升级 版 用 户 视 图 


多 么 可 爱 的 视图 ! 两 个 视图 都 运行 良好 ， 它 们 使 用 的 数据 来 日 同一 月 


昌 户 模型 ， 


的 视图 (Web 视图 一 定 也 很 棒 )， 而 无 需 涉及 用 户 模 型 代码 。 
15.1.3 ”下 一 个 目标 


团队 最 终 选 择 其 中 的 哪 一 个 都 没有 问题 。 团 队 中 的 其 他 人 也 可 以 根据 需要 很 容易 地 


因此 无 论 
创建 更 多 


我 们 已 经 学 会 从 数据 创建 用 户 模型 ， 并 以 多 种 方式 使 用 视图 显示 该 数据 。 下 一 个 目标 是 


给 用 户 提 供 一 个 简单 的 方法 ， 记 录 他 们 在 控 种 


一 


台 上 的 锻炼 会 话 ， 并 根据 数据 的 变化 获得 更 新 


视图 、 重 新 显示 。 本 书 将 在 第 16 章 中 介绍 如 何 创建 一 个 健身 应 用 控制 器 来 实现 以 上 目标 。 
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15.2 The Crypt 一 一 把 显示 代码 从 Player 
在 上 一 节 中 ， 我 们 学 习 了 如 何 从 头 开 


和 Place 模型 中 分 离 出 来 


后 编写 视图 代码 来 显示 数据 。 在 本 节 中 ， 
Place)。 目 前 ， 显 示 模 型 数据 的 代码 与 模型 本 身 混 合 在 
版 本 中 的 所 有 模块 。 为 了 方便 日 后 更 改 ， 
两 个 视图 playerView 和 placeView。 


需要 将 显示 代码 


始 创 建 视图 。 首 先 有 

我 们 将 使 用 The Crypt 的 现 有 模型 ds 和 
一 起 ， 图 15-2 显示 游戏 当前 版 本 和 新 
与 Player 和 Place 模型 分 开 


个 提供 数据 的 用 户 模型 ， 


， 创 建 


我 们 首先 更 新 玩家 模型 ， 然 后 更 新 场所 模型 。 
当前 版 本 将 视图 代码 移动 到 视图 自己 的 模块 中 新 版 本 
spacer Player spacer 
Player 
Map data playerView Map data 
Map builder Place Map builder 
Place 
Game init placeView Game init 


图 15-2 把 Player 和 Place 模型 中 的 视图 函数 移 至 视图 自 


己 的 模块 中 


15.2.1 ”为 玩家 创建 视图 

图 15-3 的 左边 是 未 更 改 之 前 ， 在 Player 模型 
于 显示 玩家 信息 的 6 个 函数 (在 左 
而 不 关注 对 数据 的 显示 。 图 15-3 的 右边 显示 了 更 


上 


中 定义 的 函数 。 如 
上 方 )， 但 是 我 们 希望 该 模型 只 关注 对 玩家 数据 的 管理 ， 
新 的 玩家 模型 ， 包 括 一 些 要 添加 的 额 儿 


图 所 示 ， 该 模型 包括 用 


法 以 及 名 为 playerView 的 新 模块 ， 该 模块 只 关注 对 玩家 信息 的 显示 。 现 在 ， 我 们 实际 上 创建 
了 两 个 模块 : playerView 和 Player。 
layerView 后 
将 显示 函数 移动 到 ee 
更 新 之 前 自己 的 模块 getNameInfo getTitleInfo 
getNameInfo getTitleInfo getHealthInfo getInfo 
getHealthIinfo getIinfo getIitemsInfo render 
getItemsInfo ShowInfo 
setPlace getPlace 
setPlace SetPlace addItem removeltem 
addItem hasItem applyDamage 
Player 将 数据 管理 函数 保留 人 
在 Player 模 型 中 
Player 
图 15-3 将 显示 函数 从 Player 模型 移动 到 自己 的 模块 中 
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1. 模型 

模型 不 仅 包含 数据 ， 而 且 提 供用 于 管理 数据 的 方法 ， 例 如 添加 、 删 除 和 更 新 数据 ， 模 型 
还 可 以 防止 对 数据 的 直接 访问 。 要 创建 一 个 玩家 模型 ， 可 以 使 用 new 关键 字 调 用 Player 构造 
函数 ， 如 下 所 示 : 


Var player = new Player ("Jahver", 80); 


以 下 代码 清单 15-4 显示 了 新 版 Player 构造 函数 。 虽 然 我 们 不 想 让 Player 模型 费 神 去 显 
示 数 据 ， 但 必须 确保 该 数据 可 以 被 任何 需要 它 的 视图 所 用 。 我 们 仍然 希望 保护 私人 数据 不 被 
随意 调整 ， 所 以 创建 了 一 个 方法 getData， 用 来 返回 数据 的 副本 。 以 下 为 返回 的 数据 : 


{ 


"name" : "Jahver", 

"healLltnh" : 80, 

"items" : [ "a rusty Key"” ]， 
"place™ : "The Crypt" 


} 


为 了 处 理 第 16 章 中 的 挑战 ， 我 们 需要 向 Player 构造 函数 添加 三 个 方法 : hasItem、 
removeltem 和 applyDamage。 前 往 JS Bin 并 运行 新 的 构造 函数 代码 ， 可 以 在 控制 台 提 示 符 下 
执行 以 下 操作 (对 于 undefined 的 响应 已 省 略 ): 

创建 一 个 玩家 ， 添 加 几 个 物品 ， 并 获得 玩家 的 数据 ; 


> Var p = new theCrypt.Player ("Dax", 10) 
> p.addIitem("a key") 
> p.addIitem("a lamp") 
> p.getData() 
[object Object] { 
health: 10, 
items: ["a key", "a lamp"], 
name: "Dax" 


} 
使 用 新 的 item 方法 来 检查 该 玩家 是 否 得 到 或 删除 某 物 


> p.hasIitem("a key") 


下 机 


true 
> p.hasItem("a sword") 


false 


> p.removeltem("a key") 
> p.getData() .items 
["a lamp"] 


对 玩家 施加 伤害 ， 然 后 查看 他 们 的 健康 值 : 


> p.applyDamage (2) 
> p.getData() .health 
8 
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> p.applyDamage (10) 
> p.getData() .health 
-2 


代码 清单 15-4 ”Player 构造 函数 
(http://jsbin.com/yaneye/edit?js,console) 


(FuncetLon (yy 去 
Var Player = function (name, healtnh) 
Var items = []; 


var place = null; 
this.addIitem = function (item) 
items.push (item); 


}; 
this.hasItem = function (Item) { 


return Items .indexOf (item) 


}; 


this.removeItem = function (Item) { 


{ 


// 如 果 指 定 的 物品 在 items 数组 中 ， 则 
// 返 回 true 


!== -1; 


// 从 items 数组 中 删除 指定 的 物品 


var itemIndex = Items .IndexoOof (Item) : 


if (ItemIndex !== -1) { 


items.splice(itemIndex, 1); 


}; 

this.setPlace = function 
place = destination; 

}; 

this.getPlace = function () { 
return place; 


}; 


this.applyDamage = function (damage){ 


health = health - damage; 
}; 
this.getData = function () { 
var data = { 


"name" : name, 
"health" : health, 
"items" : items .slice() 
}; 
if (place !== null) { 
data.place = place.title; 
} 


return data; 
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(destination) { 


// 从 玩家 的 健康 值 中 减 去 指定 的 
// 伤 害 值 


I 


// 定 义 一 个 方法 来 返 


模型 数据 的 副本 


// 使 用 没有 参数 的 slice 方法 复 和 
//items 数组 


< 
yx 


//《 如 果 玩 家 的 位 置 已 赋值 ) 包括 玩家 所 
// 在 位 置 的 标题 


// 返 回 数据 对 象 


AA 


}; 
if (window.theCrypt === undefined) { 


window.theCrypt = {}; 


} 
theCrypt.Player = Player; 


}) 0); 
Player 构造 函数 不 再 为 它 所 创建 的 模型 分 配 任何 显示 方法 。 从 先前 


addItem、setPlace 和 getPlace 仅仅 用 于 管理 模型 中 的 玩家 数据 。 用 于 显 
的 视图 对 象 。 


在 以 上 代码 中 ，hasItem 和 removeItem 都 使 用 了 indexOf 数组 方法 。 


items 数组 中 ，indexOf 将 返回 该 物品 的 索引 值 。 如 果 该 物品 不 在 数组 中 ， 
如 下 所 示 : 


["a key"， "a lamp"] .index0f ("a lamp"); // 返回 值 1 --> 数组 中 的 第 二 项 


["a key"，"a lamp"] .indqexOof("a sword"); // 返回 值 -1 -- 


removeltem 方法 使 用 splice 从 items 数组 中 删除 一 个 物品 ; 


items.splice(itemIndex, 1); 


我 们 知道 ，splice 的 第 一 个 参数 是 数组 中 要 开始 删除 元 素 的 索引 值 


第 15 章 


视图 : 显示 数据 


版 本 中 留 下 来 的 方法 
示 的 方法 已 经 移 至 新 


3 


如 果 指 定 的 物品 在 
indexOf 将 返回 -1， 


> 不 在 数组 中 


第 二 个 参数 是 要 删除 元 


素 的 数目 。 在 removeltem 中 ， 我 们 需要 删除 单个 指定 的 物品 ， 因 此 splice 的 第 二 个 参数 为 1。 


2. 视图 
在 以 前 我 们 编写 的 代码 中 ， 都 是 让 玩家 对 象 本 身 来 生成 显示 内 容 。 


现在 ， 我 们 使 用 玩家 


视图 对 显示 内 容 进 行 重新 创建 。 要 显示 一 位 玩家 ， 可 以 调用 视图 的 render 方法 ， 并 将 玩家 模 


型 作为 参数 传递 给 该 方法 : 


theCrypt .playerView.render (kandra); 


render 方法 调用 getInfo 函数 构建 一 个 玩家 信息 字符 串 ， 并 将 返回 的 
上 ， 如 下 所 示 : 


大 大 类 炎炎 类 炎炎 炎炎 炎炎 类 大 炎炎 炎炎 炎炎 大大 大 大大 炎炎 炎炎 炎炎 大 炎炎 炎炎 类 火炎 大 


* Kandra (50) 六 
大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 
Items: 

-a rusty key 


- a piece of cheese 


大 大 大 大大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 大 


亿 
碟 
了 好 
Sl 
eal 
时 
捞 
悟 
ly 


以 下 代码 清单 15-5 显示 了 playerView 代码 ， 分 配给 theCrypt.playerView 的 接口 带 有 方 


法 render。 
代码 清单 15-5 玩家 视图 


My http://jsbin.com/zucifu/edit?js,console) 


(function () { 
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render 是 唯一 给 用 户 提 供 输 出 的 函数 ， 将 生成 的 玩家 信息 字符 串 输 出 到 控 币 
函数 中 ， 把 玩家 的 数据 传递 给 getInfo。 


Var getNameInfo = function (playerData) { 
return playerData.name; 

}; 

Var getHealthInfo = function (playerData) { 


return "“"(" + playerData.health + ")"; 
}; 
Var getIitemsInfo = function (playerData) { 
Var itemsString = "Items:" + spacer.newLine(); 


playerData.items.forEach (function (item, i) { 
itemsSstring += " - "+ item + spacer.newLine(); 
}); 
return itemsString; 
}; 
Var getTitleInfo = function (playerData) { 
return getNameInfo (playerData)+" "+getHealthIinfo (playerData); 


}; 
var getInfo = function (playerData) { // 使 用 玩家 数据 建立 一 个 信息 字符 


Var info = spacer.box(getTitleInfo(playerData), 40, ™*"); 


Ud 


村 
[= 


info += " " + getItemsInfo (playerData); 
info += spacer.line(40, "*"); 
info += spacer.newLine(); 


return info; 
}; 
Var render = function (player) { 
console.1log (getInfo (player .getData() ) ) ; / /将 玩家 数据 的 副本 传递 给 getInfo 
}; 
if (window.theCrypt === undefined) { 


window.theCrypt = {}; 
} 
theCrypt.playerView = { // 将 render 方法 设置 为 playerView 的 属性 


render: render 


}) (0); 


台 上 。 在 该 


一 局 


现在 
不 想 在 控 


我 们 已 经 成 功 地 将 玩家 模型 从 玩家 视图 中 拆 分 出 来 。 在 第 17 章 将 看 到 ， 当 我 们 
判 台 上 显示 玩家 信息 ， 而 是 要 在 网 页 上 显示 玩家 信息 时 ， 只 需要 轻 轻松 松 地 更 改 一 


下 视图 就 可 以 了 。 现 在 ， 我 们 先 按照 以 上 创建 玩家 的 步 又， 为 游戏 中 的 场所 创建 一 个 模型 和 


一 个 视图 


o 


15.2.2 ”创建 场所 视图 


正如 上 一 节 中 创建 玩家 那样 ， 我 们 需要 为 场所 重新 编写 构造 函数 ， 以 便 创建 一 个 能 保存 
每 个 地 方 数 据 的 模型 ， 并 提供 一 些 操作 数据 的 方法 。 该 模型 也 带 有 一 个 getData 方法 ， 以 便 


视图 可 以 获得 每 个 地 方 的 数据 副本 以 供 显 示 。 然 后 ， 我 们 也 需要 创建 一 个 视图 用 来 在 控制 台 
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第 15 章 


15-4 显示 了 如 何 将 旧 的 模型 代码 拆 分 成 为 新 的 模型 代码 。 


PlaceView 


更 新 之 后 
getExitsIinfo 
getInfo 
getTitlernfo 
render 
GetItemsInfto 
addItem getLastItem 
addExit getExit 
addChallenge getChallenge 
getData 
Place 


图 15-4 将 显示 函数 从 Place 模型 移动 到 自己 的 模块 中 


人 人 ES 洲 
上 输出 位 置 数 据 。 图 
将 显示 函数 移动 到 
更 新 之 前 自己 的 模块 中 
getExitsInfo 
getIinfo 
getTitleInfo 
showInfo 
getItemsInfo 
addItem getLastItem 
addExit getExit 
addChallenge getChallenge 
Ee 在 Place 模型 中 保留 
数据 管理 函数 
| 
1. 模型 


代码 清单 15-6 显示 了 简化 版 的 Place 构造 函数 ， 已 删除 其 显示 代码 ， 并 且 添加 了 一 个 


getData 方 当 


{ 


} 


KE。 getData 返回 的 数据 如 下 所 示 : 
"title" "The Old Library", 
"description™" : 

"items" : [ "a rusty key" 1], 
vexite™ “ [ "west", "up™ ] 


其 他 方 


€> 


图 


(EE 


代码 清单 15-6 


(http://jsbin.com/vuwave/edit?js,console) 


法 与 旧版 的 Place 构造 函数 相同 。 


简化 版 Place 构造 函数 


unction () { 
Var Place = function (title, description) { 
Var exits = {}; 
Var items = []; 
var challenges = {}; 


this.addIitem = function 
items.push (item); 

}; 

this.getLastIitem = function 
return items.pop(); 

}; 


this.addExit = function 


(item) 


{ 


{ 


(direction, exit) { 


视图 : 显示 数据 


"You are in a dusty library. Books line the walls.", 
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exits[direction] = exit; 
}; 


this.getExit = function (direction) { 


return exits[direction]; 

}; 

this.addChallenge = function (direction, challenge) { 
challenges[direction] = challenge; 

}; 

this.getChallenge = function (direction) { 
return challenges[ldirection]; 


}; 


this.getData = function () { // 定 义 一 种 方法 以 返回 地 点 数据 的 副本 
var data = { 
weitleT £ titLe; 
"description™" : description, 
"items" : items.slice(), 


"exits" : Object.keys(exits) // 使 用 Object.keys 将 direction 
// 数 组 分 配给 exits 属性 


}; 
return data; // 返 回 数据 对 象 


}; 

}; 

if (window.theCrypt === undefined) { 
window.theCrypt = {}; 


} 
theCrypt.Place = Place; 


}) () 7 


游戏 中 的 每 个 场所 模型 都 与 某 个 目的 地 相连 ， 而 目的 地 也 是 地 点 模型 ， 存 储 在 地 点 模型 
的 exits 对 象 中 ， 该 对 象 的 键 是 目的 地 的 方向 ， 例 如 ，exits ["south"] 是 一 个 地 点 模型 ， 其 title 
属性 为 “The Old Library”。Object.keys 方法 将 对 象 的 所 有 键 作 为 数组 返回 ， 因 此 ， 
Object.keys(exits) 返 回 当前 位 置 出 口 的 所 有 方向 ， 例 如 ["south","east","west"]。 

Place 构造 函数 中 的 getData 方法 可 以 返回 某 个 地 方 的 数据 副本 ， 包 括 使 用 
Objectkeys(exits) 生 成 的 出 口 方向 数组 。 视 图 将 使 用 该 数组 来 显示 可 用 的 出 口 ， 玩 家 可 以 从 
这 些 出 口中 做 出 选择 ， 继 续 他 们 的 冒险 。 

2. 视图 

以 下 代码 清单 15-7 是 场所 视图 模块 的 代码 ， 其 工作 原理 与 玩家 视图 模块 相同 ， 读 者 应 
该 很 熟悉 了 ， 该 视图 模块 在 控制 台 上 的 输出 如 下 所 示 : 


= The Kitchen = 


You are in a kitchen. There is a disturbing smell. 
Items: 


- a piece of cheese 
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Exits from The Kitchen: 
= East 


- south 


3 代码 清单 15-7 场所 视图 
加 (http://jsbin.com/royine/edit?js,console) 


(funection (} 4{ 
var getItemsInfo = function (placeData){ // 将 该 场所 的 数据 传递 到 辅助 函数 
Var itemsString = "Items: " + Spacer.newLine () ， 


placeData.items.forEach (function (item) { 


itemsString += " - "+ item; 


itemsSstring += spacer.newLine(); 


}); 


return itemsString; 
}; 
Var getExitsInfo = function (placeData) { 


Var exitsString = "Exits from " + placeData.title; 
exitsString += ":" + spacer.newLine(); 
placeData.exits.forEach (function (direction) { 


exitsString += " - "+ direction; 


exitsString += spacer.newLine(); 


}); 


return exitsString; 


}; 
Var getTitleInfo = function (placeData) { 


return spacer.box (placeData.title,placeData.title.length + 4, "=");} 


}; 
var getInfo = function (placeData) { // 将 该 场所 的 数据 传递 给 主 函数 getInfo 
Var infoString = getTitleInfo (placeData); 


infoString += placeData.description; 

infoString += spacer.newLine() + Spacer.newLine (); 
infoString += getItemsInfo(PLaceData) + spacer.newLine(); 
infoString += getExitsInfo(placeData); 

infoString += spacer.line(40, "=") + spacer.newLine(); 


return infoString; 


}; 


Var render = function (place) { 
console.log(getInfo(place.getData()));  // 调 用 getData 获取 场所 模型 
/ /数据 的 副本 
}; 
if (window.theCrypt === undefined) { 


window.theCrypt = {}; 
} 
theCrypt.placeView = { 


render: render 
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}) (0); 


如 同 玩家 的 视图 模块 一 样 ， 场 所 的 视图 模块 从 主要 显示 函数 getInfo 调用 一 些 辅助 函 
数 : getlItemsInfo、getExitsInfo 和 getTitletImfo， 以 建立 关于 模型 的 信息 字符 串 。render 函数 是 


唯一 可 以 产生 用 户 可 见 输出 的 函数 ， 该 函数 在 控制 台 上 显示 组 合 好 的 场所 信息 。 


我 们 现在 已 经 拥有 玩家 和 场所 的 模型 构造 函数 和 视图 ， 将 数据 和 数据 的 显示 进行 了 有 效 
分 离 : 模型 只 关注 数据 的 操作 ， 与 数据 显示 无 关 ; 视图 只 关注 显示 数据 ， 与 数据 更 改 无 关 。 


以 上 两 个 视图 中 都 使 用 了 render 方法 来 显示 模型 : 


// 创建 模型 


Var kandra = new Player("Kandqra"，50) ， 


Var library = new Place("The Library", "You 
// 使 用 视图 显示 模型 信息 
playerView.render (kandra); 


placeView.render (library); 


are in a dusty library."); 


除了 显示 玩家 和 场所 的 信息 之 外 ， 我 们 还 需要 在 用 户 玩 游戏 时 给 玩家 一 些 提示 消息 ， 例 


如 ， 告 诉 他 们 是 被 僵尸 咬 伤 了 ， 还 是 被 豹子 撕 伤 了 。 


15.3 与 玩家 交互 一 一 消息 视图 


当 冒 险 者 在 游戏 中 行进 时 ， 需 要 让 他 们 知道 周围 正在 发 生 什么 情况 。 我 们 使 用 玩家 视图 


为 玩家 更 新 健康 值 和 他 们 携带 的 物品 ， 使 用 场所 视图 显示 每 个 地 方 的 标题 和 说 明 ， 并 列 出 此 
地 的 物品 和 出 口 。 在 游戏 中 ， 当 玩家 尝试 了 一 次 无 效 的 行动 或 遭 到 伤害 时 ， 还 需要 一 种 能 够 


为 他 们 显示 反馈 信息 的 方法 ， 如 下 所 示 : 


> game.go ("north") 

*** There is no exit in that direction *** 
> game.get ("a piece of cheese") 

*** That item is not here *** 


> game.use ("a lamp north") 


*** That doesn’t help. The door is still locked. *** 


为 了 处 理 此 类 消息 ， 我 们 需要 创建 一 个 消息 视图 。 如 同 其 他 视图 一 样 ， 在 其 公共 接口 处 


有 一 个 render 方法 ， 游 戏 将 要 显示 的 文本 传递 给 render 方法 : 


theCrypt.messageView.render ("That item is not here.") 


以 下 代码 清单 15-8 显示 该 视图 的 代码 。 局 部 getMessageInfo 函数 返回 一 个 供 显示 的 字 


符 串 ，render 函数 将 它 在 控制 台 上 输出 。 


代码 清单 15-8 ”消息 视图 
nl (http://jsbin.com/jatofe/edit?js,console) 


(function () { 


246 


三 


第 15 章 视图: 显示 数据 


var getMessageInfo = function (messageData) { // 编 排 消息 的 格式 使 该 消 
// 息 看 上 去 很 紧急 


return “*** v + messageData + ”兴业 
上 


Var render = function (message) { 


console.error (getMessageInfo (message)); // 使 用 console.error 来 提 
// 不 消息 ， 提 示 消 息 的 形式 与 


/ /报错 消息 一 样 醒目 
}; 
if (window.theCrypt === undefined) { 
window.theCrypt = {}; 


} 
theCrypt.messageView = { 


render: render 


}) 0); 


在 以 上 代码 中 ，render 函数 使 用 了 console.error 方法 ， 类 似 于 console.log。 但 是 在 日 常 


编程 中 ， 开 发 人 员 一 般 使 用 console.error 来 提示 程序 中 的 错误 ， 控 制 台 在 显示 错误 时 通常 与 
显示 普通 消息 不 同 ， 错 误 通 常 显示 为 红色 。 这 刚好 满足 了 我 们 的 需要 : 在 控制 台 上 醒目 地 向 


玩家 提示 消息 。 
在 本 书 的 第 14 章 ， 我 们 为 The Crypt 地 图 数据 添加 了 挑战 。 如 何 使 用 消息 视图 


示 
每 个 挑战 相关 的 成 功 或 失败 消息 ?我 们 首先 需要 一 些 代 码 来 检查 用 户 应 对 挑战 的 操作 ， 并 基 
髓 


于 此 来 更 新 玩家 和 场所 模型 ， 然 后 使 用 视图 来 显示 游戏 的 最 新 状态 。 我 们 现在 需要 
相关 内 容 将 在 第 16 章 进行 讨论 。 


1S.4 本章 小 结 


国 创建 视图 来 显示 模型 中 的 数据 。 
加 模型 和 视图 分 别 关 注 不 同 的 内 容 : 模型 操作 数据 ， 视 图 显示 数据 。 
国 创建 多 个 视图 ， 以 不 同方 式 显示 相同 的 模型 数据 。 


ul 


ss 时 
水 二 


空 制 


图 保持 所 有 视图 的 接口 一 致 。 例 如 ， 本 章 中 所 有 视图 都 用 render 方法 作为 接 
方式 也 相同 : 


fitnessApp.userView.render (user); 


fitnessApp.userViewEnhanced.render (user); 
theCrypt.playerView.render (player); 
theCrypt.placeView.render (place); 


theCrypt.messageView.render (message); 


， 调 用 
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第 16 章 控制 融 : 连接 模型 和 视图 


本 章 内 容 包 括 : 

图 根据 用 户 输入 执行 操作 

图 响应 用 户 操 作 更 新 模型 

图 将 更 新 的 模型 传递 到 视图 进行 显示 
图 完成 控制 台 版 本 的 游戏 The Crypt 


本 书 的 第 二 部 分 一 直 致 力 于 组 织 代 码 。 随 着 程序 变 得 越 来 越 长 ， 我 们 逐渐 体会 到 前 期 对 
代码 费心 费力 的 组 织 工 作 所 带 来 的 便利 之 处 。 组 织 代码 使 我 们 更 易于 专注 程序 的 单个 部 分 ， 


更 易于 切换 模块 以 更 改 某 些 功能 ， 还 更 易于 在 多 个 项 目 中 重用 代码 。 

得 益 于 将 程序 分 解 成 模块 的 做 法 ， 现 在 我 们 可 以 为 每 个 模块 指定 一 个 特定 的 任务 。 第 
14、15 和 16 章 构成 三 部 曲 ， 每 革 着 眼 于 一 个 常见 任务 ， 每 个 任务 由 一 个 模块 来 执行 。 在 第 
14 章 介绍 了 模型 ， 在 第 15 章 介绍 了 视图 ; 现在 我 们 用 控制 占 将 以 上 二 者 联系 起 来 。 

为 了 查看 操作 中 的 控制 器 ， 并 了 解 控 制 器 是 如 何 根据 用 户 输入 来 管理 模型 和 更 新 视图 
的 ， 我 们 将 继续 在 健身 应 用 程序 和 游戏 The Crypt 两 个 项 目 中 进行 工作 。 在 健身 应 用 程序 
中 ， 用 户 将 记录 锻炼 的 会 话 ， 在 游戏 The Crypt 中 ， 当 玩家 探索 危险 的 地 方 时 ， 将 面临 难题 
需要 解决 。 他 们 能 够 在 健康 值 跌 到 零 之 前 成 功 逃 脱 吗 ? 


16.1 构建 一 个 健身 应 用 控制 器 


团队 成 员 已 经 向 亲朋 好 友 推 荐 了 我 们 正在 编写 的 健身 应 用 程序 。 现 在 有 一 群 人 在 排队 等 
着 测试 该 程序 。 他 们 是 一 个 运动 发 烧 友 群体 ， 并 一 直 热衷 于 把 锻炼 情况 记录 在 纸 上 。 我 们 的 
工作 目前 进展 顺利 ， 下 一 步 需要 做 什么 ?以 下 是 团队 提出 的 要 求 ; 

(1) 以 字符 串 形 式 检索 用 户 数据 。 

(2) 将 用 户 数据 转换 为 用 户 模型 。 

(3) 显示 用 户 数据 。 

(4) 提供 一 个 用 户 添加 会 话 的 接口 。 
对 照 以 上 任务 清单 ， 我 们 在 第 14 章 创建 了 模型 ， 已 经 完成 了 任务 (2); 在 第 15 章 创建 
了 视图 ， 已 经 完成 了 任务 (3); 任务 (1) 涉及 在 互联 网 上 检索 数据 ， 读 者 将 在 本 书 的 第 三 
部 分 进行 学 习 ; 现在， 我 们 就 来 着 手 完成 任务 〈4)。 我 们 需要 为 那些 狂热 的 健身 爱好 者 提供 
个 简单 的 方式 来 记录 他 们 所 完成 的 每 一 次 运动 。 
我 们 打算 用 一 条 命令 来 记录 用 户 的 运动 情况 : 


第 16 章 控制 器 : 连接 模型 和 视图 
app.1log("2017-02-07"，50) 


用 户 可 以 调用 app.log 方法 ， 传 递 他 们 的 运动 日 期 和 每 次 锻炼 的 持续 时 间 〔 以 分 钟 为 单位 )。 
该 命令 如 何 能 够 到 达 用 户 模 型 ? 视图 如 何 能 够 相应 地 更 新 显示 ?这 就 是 控制 器 要 做 的 工作 。 


16.1.1 -控制 器 的 作用 


控制 器 对 其 他 程序 的 作用 犹如 把 各 个 音乐 曲目 编排 成 优美 和 谐 的 管弦 乐 。 控 制 器 针对 用 
户 输 入 做 出 反应 ， 然 后 更 新 模型 和 视图 。 图 16-1 显示 了 健身 应 用 程序 在 JS Bin 中 打开 时 会 


加 载 的 模块 。 我 们 已 经 拥有 第 14 章 和 第 15 革 的 数据 ， 拥 有 User 构造 函数 和 视图 ， 现 在 需 
要 创建 一 个 控制 器 来 处 理 各 个 部 分 之 间 的 交互 。 


加 载 


1. 加 载 了 四 个 模块 


Data Constructor View Controller 


图 16-1 健身 应 用 程序 的 四 个 模块 


16-2 显示 了 控制 器 如 何 参与 初始 化 应 用 程序 。 控 制 器 使 用 User 构造 函数 ， 从 数据 构 
建 用 户 模型 。 当 应 用 程序 运行 时 ， 控 制 器 对 用 户 调用 app.log 做 出 反应 : 将 记录 的 会 话 添加 
到 用 户 模型 ， 然 后 将 更 新 的 模型 传递 到 视图 进行 显示 。 

现在 ， 我 们 大 致 明白 了 控制 器 需要 做 什么 。 具 体 将 如 何 实现 ? 


初始 化 
2. 控制 器 使 用 User 构 造 函 数 从 数据 构建 一 个 用 户 模型 
Data Controller Model 
使 用 
3. 控制 器 根据 用 户 输入 更 新 模型 
Model 
log("2017-02-08", 50) Controller 
View 


4. 控制 器 将 更 新 的 模型 传递 到 视图 以 供 显示 


图 16-2 ”控制 器 在 健身 应 用 程序 中 执行 的 任务 


16.1.2 构建 一 个 健身 应 用 控制 如 
以 下 为 控制 器 中 的 重要 语句 : 


var user = buildUser (userData); // 将 用 户 数据 转换 为 用 户 模 型 
> app.109("2017-02-08", 50) // 用 户 在 记录 一 个 会 话 
user.addSession ("2017-02-08"，50); // 控 制 器 将 其 添加 到 模型 中 
fitnessApp.userView.render (user); // 然 后 更 新 视图 
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以 下 代码 清单 16-1 显示 了 控制 器 的 完整 代码 。 
代码 清单 16-1 ”健身 应 用 程序 控制 器 


My http:/ijsbin.com/goniro/edit?js,console) 
(二 这 入 这 七 于 人 证 人) 并 
var buildqUser = function (userData){ // 定 义 图 数 ， 从 用 户 数据 构建 用 户 模型 
Var user = new fitnessApp.User (userData.name); 


userData.sessions.forEach(function (session) { 
user.addSession(session.sessionDate, session.duration); 
}); 
return user; 
}; 
var init = function (userData) { // 定 义 init 函数 ， 对 应 用 程序 进行 初始 化 
var user = buildUser (userData);// 从 用 户 数据 构建 模型 并 将 其 分 配给 用 户 变 量 
fitnessApp.userView.render (user); // 将 新 用 户 模型 传递 到 视图 进行 显示 
return { // 返 回 一 个 具有 单个 方法 1og 的 接 
log: function (sessionDate, duration) 


user.addSession(sessionDate, duration); 


fitnessApp.userView.render (user); 


return "Thanks for logging your session."; 


}; 
}; 
if (window.fitnessApp === undefined) { 


window.fitnessApp = {}; 

} 
fitnessApp.init = init; // 通 过 将 init 方法 添加 到 fitnessApp 命名 空间 
// 中 ,使 init 方法 可 用 


}) () 7 


当 程 序 加 载 控制 器 模块 时 ， 将 init 函数 添加 到 fitnessApp 命名 空间 。 我 们 可 以 通过 调用 
init 并 向 其 传递 用 户 数据 来 启动 该 应 用 程序 ; 


Var app = fitnessApp.init (fitnessApp.userData); 
init 函数 返回 一 个 具有 单个 方法 log 的 接口 。 通 过 将 返回 的 接口 分 配给 app， 可 以 让 用 户 
调用 app.log 来 记录 其 会 话 。 
16.1.3 ”将 各 个 部 分 组 合 在 一 起 用 于 健身 应 用 程序 


代码 清单 16-2 和 16-3 显示 了 JS Bin 上 的 健身 应 用 程序 (HITML 和 JavaScript)。 运 行程 
序 可 以 让 用 户 记录 锻炼 情况 ， 如 下 所 示 : 


>appLog'("20L7=02=08", 55) 


室 制 器 将 以 上 会 话 记录 添加 到 用 户 模型 ， 并 将 更 新 的 模型 传递 给 视图 ， 输 出 如 下 所 示 : 


Mahesha 
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35 minutes on 2017-02-05 
45 minutes on 2017-02-06 
55 minutes on 2017-02-08 
135 minutes so far 

Well done! 


Thanks for logging your session. 


器 : 连接 模型 和 视图 


在 以 下 代码 清单 16-2 中 ， 使 用 HTML 脚本 元 素 加 载 健身 应 用 程序 〈 几 16-1) 中 的 4 个 


模块 ， 再 将 其 分 配给 fitnessApp 命名 空间 共享 其 属性 、 对 象 和 函数 。 


代码 清单 16-2 ”健身 应 用 程序 (HTML) 
(http://jsbin.com/huxuti/edit?html,js,console) 


<!--fitnessApp.userData 一 -> 

<script src="http://output.jsbin.com/tenuwis.js"></script> 
<!--fitnessApp.userView --> 

<script src="http://output.jsbin.com/yapahe.js"></script> 
<!--fitnessApp.User --> 

<script src="http://output.jsbin.com/fasebo.js"></script> 
<!--fitnessApp.controller --> 

<script src="http://output.jsbin.com/goniro.js"></script> 


以 下 代码 清单 16-3 显示 了 初始 化 程序 所 需 的 一 行 JavaScript 代码 ， 该 代码 提供 了 可 供用 


户 使 用 的 app.log 方法 。 


代码 清单 16-3 ”健身 应 用 程序 
(http://jsbin.com/huxuti/edit?js,console) 


Var app = fitnessApp.init (fitnessApp.userData); 
运行 以 上 程序 ， 就 可 以 添加 更 多 记录 运动 情况 的 会 话 。 
16.1.4 下 一 个 目标 


以 上 健身 应 用 程序 的 下 一 个 目标 就 是 团队 提出 的 第 (4) 项 任务 : 从 互联 网 获取 用 户 数 
据 作为 文本 ， 然 后 将 该 文本 转换 为 JavaScript 对 象 ， 再 传递 到 fitnessApp.init。 在 第 20 章 ， 


读者 将 重新 回 到 这 个 应 用 程序 ， 继 续 完 善 它 ， 并 完成 最 后 一 项 任务 。 


16.2 ”游戏 The Crypt 一 一 添加 控制 器 


我 们 继续 完善 本 书 第 二 部 分 中 的 游戏 The Crypt。 在 本 章 结 束 时 ， 我 们 将 完成 一 个 能 够 


运行 的 控制 台 应 用 程序 。 在 这 个 程序 中 ， 有 一 些 挑战 需要 玩家 去 应 对 ， 还 有 一 些 危 险 需 要 玩 


家 去 注意 : 当 玩 家 的 健康 值 下 降 到 零 时 ， 游 戏 就 会 结束 。 我 们 的 


目标 是 让 游戏 完全 运行 起 


来 ， 现 在 游戏 拼图 板 只 缺少 一 块 儿 内 容 : 控制 闫 。 添 加 上 控制 问 ， 就 大 功 告 成 了 ! 


现在 ， 我 们 已 经 拥有 游戏 The Crypt 的 数据 、 模 型 和 视图 ， 控 


制 器 是 将 上 述 所 有 部 分 联 


系 在 一 起 的 模块 。 控 制 器 将 地 图 数据 传送 到 地 图 构建 器 ， 并 将 模型 数据 传递 给 视图 。 控 制 器 
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为 用 户 提供 了 一 个 玩 游 戏 的 接口 ， 该 接口 还 能 够 对 玩家 命令 做 出 响应 。 下 面 ， 我 们 就 来 学 习 
这 个 身 兼 数 职 的 控制 器 ， 看 看 它 如 何 与 游戏 中 的 其 他 模块 相互 衔接 、 相 互 适应 。 

图 16-3 显示 了 构成 游戏 The Crypt 的 所 有 模块 。 控 制 器 模块 已 经 替换 了 以 前 标记 为 
“Game init” 的 模块 。 既 然 我 们 正在 使 用 模型 和 视图 ， 就 应 该 把 这 个 模块 称 作 一 个 控制 器 。 


284| ”读者 不 禁 会 想 ， 这 是 为 什么 ? 控制 器 又 能 够 做 什么 ? 


Utility 
Views 
3 Model Constructors 

BY Controller 

Map Player 

: placeView Controller 
Map data place 

messageView 


Map builder 
图 16-3 构成 游戏 The Crypt 的 各 个 模块 


16.2.1 “控制 器 在 游戏 中 的 作用 
空 制 器 能 够 对 游戏 进行 初始 化 ， 并 在 游戏 运行 时 对 用 户 的 输入 做 出 响应 :根据 玩家 的 操 
作 来 更 新 相应 的 模型 和 视图 。 
1. 对 游戏 进行 初始 化 
当 游戏 首次 加 载 时 ， 控 制 器 将 : 
(1) 使 用 Place 构造 函数 从 地 图 数据 构建 场所 模型 。 
(2) 使 用 Player 构造 函数 构建 玩家 模型 。 
(3) 将 地 图 数据 中 指定 的 第 一 个 位 置 分 配 为 玩家 位 置 。 
(4) 提供 UI。 
步骤 (1) 和 步骤 (2) 如 图 16-4 所 示 。 


初始 化 
使 用 Place 构 造 函数 从 地 图 
数据 构建 场所 模型 
Place Models 
Map Data Controller 


Player Model 


使 用 Player 构 造 函 数 


构建 玩家 模型 
285 图 16-4 “ 当 游 戏 加 载 时 ， 控 制 器 就 会 构建 玩家 和 场所 模型 


2. 对 用 户 的 输入 做 出 响应 
在 游戏 运行 的 过 程 中 ， 控 制 器 将 : 
(1) 检查 玩家 的 操作 是 否 有 效 。 
(2) 更 新 玩家 和 场所 模型 。 
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(3) 将 更 新 的 模型 传递 到 视图 进行 显示 。 
(4) 将 反馈 消息 传递 到 消息 视图 。 
(5) 如 果 玩 家 的 健康 状况 降 到 零 ， 则 终止 游戏 。 
以 上 步骤 (2) 一 〈4) 如 图 16-5 所 示 。 


Player Model 


基于 用 户 的 输入 
更 新 相应 的 模型 
game .go ("south") 
game .get () Controller 


game.use ("holy water south") 


将 反馈 消息 传递 
到 a Message View 


游戏 正在 运行 


Place Model 


将 更 新 的 模型 传递 
到 视图 进行 显示 


Player View 


Place View 


图 16-5 ”控制 器 响应 用 户 操作 并 更 新 模型 和 视图 


玩家 模型 包括 一 个 getPlace 方法 ， 控 制 器 使 用 该 方法 访问 玩家 的 当前 位 置 ( 请 注意 ， 在 


图 16-5 中 Place 模型 如 何 连接 到 Player 模型 )。 


16.2.2 走 近 控制 器 代码 
我 们 已 经 大 至 了 解 控制 器 在 游戏 The Crypt 中 扮演 的 角 


色 ， 现 在 准备 进一步 探索 其 运行 


代码 。 虽 然 读 者 以 前 曾经 读 过 很 多 代码 ， 但 是 面 对 一 个 较 长 的 代码 清单 时 ， 还 是 会 望 而 却 


步 。 所 以 在 本 书 中 ， 将 这 次 探索 拆 分 成 以 下 4 节 内 容 : 
国 (16.3) 控制 器 的 整体 结构 


国 (16.4) 游戏 初始 化 ， 监 控 玩 家 的 健康 值 ， 更 新 显示 和 结束 游戏 


国 (16.5) 处 理 玩 家 的 命令 和 挑战 一 一 get、go 和 use 
国 (16.6) 运行 游戏 
下 面 ， 让 我 们 把 游戏 运行 起 来 吧 ! 


空 制 器 代码 的 结构 
我 们 已 经 看 到 ， 在 The Crypt 中 ， 控 制 器 要 执行 许多 任务 : 


启动 、 


监视 和 结束 游戏 。 为 了 帮 


助 读者 了 解 如 何 将 各 部 分 整合 为 一 个 整体 ， 以 下 代码 清单 16-4 中 省 略 了 函数 体 ， 只 关注 代码 中 
的 变量 。 欲 查看 完整 代码 、 函 数 体 和 所 有 变量 ， 读 者 可 以 访问 JS Bin 上 的 链接 网 址 。 


3 “代码 清单 16-4 游戏 控制 器 
四 (http://jsbin.com/yeqicu/edit?js) 


(function () { 
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var player; 


var inPlay = false; // 在 游戏 结束 时 使 用 inPlay 进行 标记 
var init = function (mapData, playerName) { // 构 建 地 图 ， 创 建 一 个 玩 
// 家 ， 并 开始 游戏 
/* 代 码 清单 16.5 */ 
}; 
var checkGameStatus = function(){/*16.6*/}; // 检 查 玩家 的 健康 值 是 否 
// 已 降 至 零 
Var render = function () { / 16.7 */ }; // 调 用 视图 以 更 新 显示 
Var renderMessage = function (message) {/*16.7*/}; 
Var get = function () { /* 16.8 */ }; // 响 应 用 户 的 命令 
var go = function (direction) { /* 16.9 */ }; 
var use = function (item, direction) {/*16.10*/}; 
window.game = { // 将 接口 分 配给 全 局 变量 game 
get;: get; 
go: go, 
use: use, 
二 刘 生 世 3 村 玉 二 臣 
}; 
}) (); 
以 上 代码 清单 16-4 中 包括 一 些 注释 ， 帮 助 读者 查看 在 本 章 中 省 略 的 函数 体 代 码 。 


现在 ， 我 们 可 以 开始 游戏 ! 终止 游戏 ! 监控 玩家 的 健康 值 ! 
兴奋 了 ， 游 戏 的 完整 版 本 指日可待 !) 


16.4 The Crypt 一 一 开始 和 终止 游戏 


始 和 终止 游戏 ， 并 始终 显示 更 新 后 的 最 新 信息 。 在 游戏 中 ， 玩 家 


里 然 在 get、go 和 use 函数 中 已 包含 游戏 的 主要 动作 ， 但 是 我 们 还 是 需要 能 够 便捷 地 开 


更 新 显示 !《〈 对 不 起 ， 我 太 


面临 残酷 的 挑战 ， 应 对 挑战 
， 足 够 继续 游戏 。 


到 正确 的 地 方 ， 然 后 显示 玩 


可 能 会 耗 尽 他 们 的 健康 值 ， 这 时 就 需要 查看 他 们 是 否 依然 强健 和 热 
16.4.1 ”游戏 初始 化 
要 开始 游戏 ， 需 要 调用 init 方法 进行 初始 化 : 
game.init (map, playerName); 
init 方法 可 以 构建 地 图 、 创 建 玩家 模型 、 将 玩家 的 位 置 设置 
家 和 地 点 信息 ， 如 以 下 代码 清单 所 示 。 
代码 清单 16-5 init 函数 


0 (http://jsbin.com/yeqicu/edit?js) 


var player; 


// 声 明 一 个 变量 来 记录 游戏 是 否 正 


Var inPlay = false; 


在 运行 


var init = function (mapData, playerName) { 
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Var firstPlace = theCrypt.buildMap (mapData); 


player = new theCrypt.Player (playerName，50);  // 设 置 玩 家 


player.addIitem("The Sword of Doom"); 
player.setPlace (firstPlace); 

// 更 新 inPlay: 游戏 ] 
// 显 示 地 点 和 玩家 信息 


FE 在 运行 


inPplay = true; 


render () 


}; 


以 上 代码 中 ， 在 init 函数 之 外 声明 了 player 和 inPlay 变量 ， 以 供 控 制 器 中 的 其 他 函数 访 
问 。buildMap 函数 返回 游戏 中 的 起 始 位 置 ， 并 将 该 位 置 设置 为 玩家 的 当前 位 置 。init 函数 调 


用 render 来 显示 起 始 位 置 和 玩家 信息 。 
render、get、go 和 use 函数 都 使 用 了 inPlay 变量 。 只 有 在 inPlay 为 true 时 才 执 行 这 些 常 
规 任务 ， 当 玩家 的 健康 值 下 降 到 零 时 ， 控 制 器 将 inPlay 设置 为 false， 上 述 任务 全 都 无 法 执 
行 。 因 此 ， 非 常 有 必要 关注 玩家 的 健康 值 。 


行 。 
16.4.2 ”监测 玩家 的 健康 值 


每 当 玩 家 受到 伤害 时 ， 都 需要 检查 他 们 的 健康 值 是 否 已 经 降 到 零 。 如 果 健 康 值 降 到 零 ， 
就 意味 着 游戏 结束 ! 控制 器 中 的 checkGameStatus 函数 就 在 执行 这 项 检查 :如 果 玩 家 已 经 被 
僵尸 咬 伤 ， 被 豹子 据 伤 以 及 遭遇 讨厌 的 碎片 ， 则 将 inPlay 变量 设置 为 false。 如 以 下 代码 清单 
所 示 。 


代码 清单 16-6 ”检查 健康 值 是 否 已 降 至 零 
(http://jsbin.com/yeqicu/edit?js) 


Var checkGameStatus = function () { 
if (player.getData() .health <= 0) { // 使 用 getData 获取 玩家 的 数据 并 检查 
// 其 健康 状况 
inPlay = false; // 通 过 将 inPlay 设置 为 false 停止 游戏 
renderMessage ("Overcome by your wounds..."); 
renderMessage("...you fall to the ground."); 
renderMessage("- Your adventure is over -"); 
} 
}; 
在 以 上 代码 中 ， 条 件 语 句 使 用 了 比较 运算 符 <= (小 于 或 等 于 )， 用 来 检查 健康 值 是 否 小 
于 或 等 于 零 : 
player.getData() .health <= 0 
如 果 玩 家 的 健康 值 小 于 或 等 于 零 则 意味 着 玩家 死亡 ， 就 会 终止 游戏 并 显示 最 后 一 条 消 
县 。 如 果 玩 家 的 健康 值 大 于 零 ， 游 戏 还 可 以 继续 ，checkGameStatus 也 不 进行 任何 操作 。 


16.4.3 ”更 新 显示 一 一 使 用 视图 模块 的 函数 


三 i 


[We 
Co 


使 月 


日 控 抽 


| 器 


因为 某 一 个 视图 只 是 在 一 个 地 方 被 引用 ， 控 制 器 3 


不 直接 调 


用 视图 


自己 的 函数 ， 这 样 更 易于 按 需 在 不 同 的 视图 模块 之 间 进 行 切换 。 代 码 清 


模块 的 render 方法 ， 而 
和 如 下 所 示 。 
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全 。 代码 清单 16-7 更 新 显示 
站 (http://jsbin.com/yeqicu/edit?js) 


Var render = function () { 
console.clear (); / /清除 显示 内 容 
if (inplay) { // 仅 当 游戏 正在 进行 时 ， 才 会 对 场所 和 玩家 的 显示 进行 更 新 
theCrypt.placeView.render (player.getPlace ()); 


theCrypt.playerView.render (player); 
} 


}; 


Var renderMessage = function (message) { 


theCrypt.messageView.render (message); 
}; 
init 函数 用 于 启动 游戏 ， 启 动 之 后 就 可 以 在 整个 游戏 过 程 中 使 用 checkGameStatus、 
render 和 renderMessage。 游 戏 中 玩家 的 主要 动作 来 自 get、go 和 use 三 个 函数 ， 当 玩家 根据 
所 持 物品 、 所 在 位 置 的 出 口 以 及 所 在 位 置 的 挑战 做 出 决定 采取 行动 时 ， 会 使 用 go 和 use。 下 
面 ， 我 们 就 去 处 理 玩家 的 命令 一 一 开始 行动 ! 


16.5 The Crypt 一 一 发 布 命令 和 解决 难题 


在 The Crypt 游戏 探索 中 ， 用 户 只 能 进行 为 数 不 多 的 几 项 操作 。 控 制 器 模块 将 以 下 接口 
分 配给 全 局 对 象 window: 


window.game = { 


get: get, 
go: go, 
init: ge 
}; 
用 户 在 控制 台 上 调用 游戏 控制 器 的 接口 方法 ， 来 进行 游戏 中 的 动作 ， 例 如 game.get0 或 
game.go("south"); 然后 ， 游 戏 控制 器 对 用 户 的 指令 做 出 响应 ， 去 创建 、 访 问 或 更 新 模型 ， 并 
将 更 新 后 的 模型 传递 到 视图 进行 显示 。 
我 们 已 经 了 解 了 init 函数 ， 本 节 将 逐一 分 析 get、go 和 use 函数 。get 函数 没有 多 大 变 
化 ，go 函数 用 来 检查 挑战 ， 而 use 则 是 一 个 全 新 的 函数 。 


16.5.1 ”使 用 game.get 拾取 物品 
探索 游戏 的 玩家 从 一 个 地 方 旅行 到 男 一 个 地 方 时 会 发 现 一 些 物品 ， 这 些 物品 能 够 帮助 他 们 
应 对 即将 面临 的 挑战 。get 方法 为 玩家 提供 了 一 种 拾取 他 们 所 发 现 物 品 的 方法 ， 如 下 所 示 。 


代码 清单 16-8 ”get 函数 
yy http:/jsbin.com/yeqicu/edit?js) 


var get = function () { 
if (inPlay) { // 仅 当 游 戏 仍 处 于 进行 状态 时 才能 获取 物品 
var place = player.getPlace(); // 在 玩家 的 当前 位 置 检 索 最 后 一 个 物品 
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}; 
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Var item = place.getLastIitem(); 


if (item !== undefined) { 
player.addIitenm (item); // 如 果 检 索 到 物品 ， 请 将 其 添加 到 玩家 列表 
render () ， // 更 新 显示 ， 表 明 该 物品 已 移动 

} else { 


renderMessage ("There is no item to get"); 


} 


} else { 
renderMessage ("The game is over!"); // 如 果 inPlay 为 false， 让 玩 
// 家 知晓 游戏 结束 
} 
return ™"; 


在 以 上 程序 中 ， 将 玩家 拾取 的 物品 从 该 地 点 的 物品 列表 末尾 删除 ， 并 将 其 添加 到 玩家 的 


物品 列表 中 。 


如 果 此 地 没有 任何 物品 ，getLastItem 将 返回 undefined。 


下 面 我 们 来 分 析 go 和 use 函数， 二 者 都 涉及 对 挑战 进行 检查 。 
16.5.2” 列 出 挑战 的 各 个 属性 


既然 玩家 
性 ， 游 戏 开 发 者 蓄意 在 玩家 游 走 于 迷宫 之 时 对 他 们 做 些 恶 劣 的 伤害 。 


我 们 在 第 


喜欢 挑战 ， 就 要 体验 一 下 危险 的 刺激 。 游 戏 刚 开始 ， 玩 家 对 和 象 就 拥有 健康 属 


14 章 开发 地 图 数据 时 ， 首 次 在 游戏 中 看 到 了 挑战 ， 但 是 直到 现在 都 没有 真正 


让 这 些 挑战 派 上 用 场 。 在 游戏 中 玩家 可 以 使 用 两 个 命令 go 和 use 来 检查 指定 方向 的 那些 挑 


战 。 干 万 不 要 忘记 ， 作 为 一 个 对 象 ， 挑 战 必须 拥有 一 些 属性 : 


"challenge™ : { 
"message" : "A zombie sinks its teeth into your neck.", 
"success" : "The zombie disintegrates into a puddle of goo."v 
"failure" : "The zombie is strangely resilient.", 
"requires" : "holy water", 
"itemConsumed" : true, 
"damage" : 20 


} 


表 16-1 列 出 了 挑战 对 象 的 各 个 属性 及 其 含义 ， 以 及 某 一 属性 是 否 为 必需 的 属性 。 


表 16-1 挑战 对 象 的 属性 
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属性 含 义 是 否 必 需 

message 当 玩 家 试图 朝 着 某 出 口 的 方向 行进 时 显示 给 玩家 的 消息 ， 消 息 中 会 之 全 名 人 间 相 3 是 
应 对 某 一 挑战 ， 玩 家 用 对 了 东西 ， 也 就 是 说 ， 玩 家 确实 使 用 了 所 需 物品 ， 就 会 显示 success 二 

success A 年 

(成 功 ) 
failure 当 玩 家 使 用 错误 的 物品 来 应 对 某 一 挑战 时 ， 就 会 显示 failure〈 失 败 ) 是 
requires 应 对 某 一 挑战 所 需 的 物品 是 
itemConsumed 物品 被 使 用 后 是 否 从 玩家 的 物品 列表 中 将 其 删除 和 否 
damage 在 玩家 没有 成 功 地 应 对 挑战 就 试图 向 出 口 方向 前 行 时 ， 从 玩家 的 健康 值 中 减 去 的 量 否 
Ri 表明 某 一 挑战 是 否 已 经 完成 。 在 初始 数据 中 ， 此 项 内 容 通 常 缺失 ， 在 游戏 进行 的 过 程 中 ， 当 在 
挑战 得 以 解决 时 ， 其 值 为 true 


[> 
\D 
jh 
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要 从 一 个 


场所 对 象 中 检索 某 一 挑战 ， 请 先 指定 方向 ， 调 用 getChallenge: 


place.getChallenge ("south'" ) ; 


回 undefined; 如 果 有 挑战 ， 就 需要 积极 


如 果 在 这 个 方向 上 没有 挑战 ，getChallenge 会 返 


应 对 。 玩 家 真正 应 对 挑战 的 第 一 个 命令 是 game.go。 


16.5.3 ”使 用 game.go 来 移动 位 置 


把 锁 ， 


玩家 使 月 


控制 器 的 go 函数 从 一 个 地 方 移动 到 另 一 个 地 方 。 如 果 玩 家 在 某 个 出 口 遇 到 一 


制 器 需要 让 玩家 知晓 他 们 的 行程 受阻 。 当 


或 者 遇 到 一 只 豹子 ， 就 无 法 前 行 ， 这 时 ， 控 4 


玩家 指定 前 行 方向 时 ， 可 以 在 控制 台 上 调用 go: 
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>game .go ("south") 


完整 的 go 函数 如 下 所 示 ， 在 代码 清单 后 面 有 详细 解释 。 


代码 清单 16-9 go 函数 
(http://jsbin.com/yeqicu/edit?js) 


var go = function (direction) { 
if (inPlav) { / /收集 所 需 的 信息 
Var Place = Player.getPlace()， 


var destination = place.getExit (direction); 
(direction); 


Var challenge = place.getChalleng 


if (destination === undefined) { 
("There is no exit in that direction"); 


renderMessag 

} else { 
if ((challenge === undefined) 
player.setPlace (destination); 


| | challenge.complete) { 
// 如 果 此 地 没有 挑战 或 挑战 已 完 
// 成 ， 请 移动 玩家 并 更 新 显示 


render () 


} else { // 让 玩家 承受 挑战 失败 所 带 来 的 伤害 
if (challenge.damage) { 
player.applyDamage (challenge.damage); 
} 


render () ; // 针 对 健康 值 的 更 改 ， 更 新 显示 
renderMessage (challenge.message); // 显 示 初 始 挑 战 消息 


// 检 查 玩 家 的 健康 值 是 否 已 下 降 到 零 


checkGameStatus () ， 


} 
} else { 
renderMessage ("The game is over!"); 


} 


return 


mn 。 
了 


}; 


函数 先 收集 所 需 信息 以 便 根 据 玩家 的 请 求 采取 行动 : 
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Var Place = player.getPplace(); 


Var destination = place.getExit (direction); 


var challenge = place.getChallenge (direction); 


也 许 在 玩家 指定 的 方向 并 没有 出 口 ， 因 此 需要 先 核查 : 


if (destination === undefined) { 


renderMessage ("There is no exit in that direction"); 


} else 


// 核 得 是 否 存在 挑战 


} 

例如 ， 在 指定 的 方向 上 确实 有 一 个 出 口 ， 但 事实 上 出 去 之 后 是 一 堵 墙 ， 玩 家 当然 不 会 忆 

进 一 堵 墙 。 如 果 此 地 没有 挑战 ， 或 者 玩家 己 经 完成 挑战 ， 就 可 以 将 他 们 移动 到 下 一 个 目的 
地 : 


fi 


if ((challenge === undefined) || challenge.complete) { 


player.setPlace (destination); 
render () 

} else { 
// 提 到 豹子 
// 所 带 来 的 伤 


莫 


} 
if 条 件 中 的 符号 | 是 逻辑 或 运算 符 。 你 辑 或 运算 符 同时 检查 由 两 个 表达 式 组 成 的 条 件 ， 如 果 
第 一 个 表达 式 challenge===undefined 或 第 二 个 表达 式 challenge.complete 的 值 为 tue， 则 整个 条 
件 为 tue; 如 果 两 个 表达 式 都 为 false， 则 整个 条 件 为 旬 lse。 与 逻辑 或 运算 符 不 同 ，JavaScript 中 
还 有 一 个 逻辑 与 运算 符 &&， 如 果 两 个 表达 式 都 为 tue， 则 值 为 tue， 否 则 为 false。 
如 果 玩 家 没有 完成 某 个 挑战 ， 就 要 承受 挑战 失败 所 带 来 的 伤害 《例如 磁 撞 、 闫 伤 、 豹 子 


咬 伤 等 )。 


if (challenge.damage) { 
player.applyDamage (challenge.damage); 


} 


最 后 ， 更 新 显示 健康 值 的 变化 和 该 挑战 的 初始 消息 ， 并 查看 玩家 的 健康 值 是 否 仍然 高 于 
: 如 果 高 于 零 ， 就 继续 游戏 。 代 码 如 下 : 


如 


render () ， 


renderMessage (challenge.message); 


checkGameStatus () ， 
以 上 都 是 玩家 独自 在 冒险 ， 并 未 遭遇 外 来 攻击 。 假 设 前 方 有 一 只 饥饿 的 豹子 挡 在 道路 
上 ， 该 怎么 办 ?玩家 如 何 才 能 打败 豹子 ? 
16.5.4 用 game.use 打败 豹子 
如 果 在 前 行 的 道路 上 遇 到 一 把 锁 或 者 有 豹子 挡 道 ， 玩 家 可 以 调用 控制 器 中 的 use 函数 来 
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应 对 挑战 ， 指 定 要 使 


] 的 物品 和 前 行 方 向 : 


>game .use ("a ball of wool", 
*** The leopard chases the ball 


VeoOuthY.) 


of wool, purring loudly. *** 


完整 的 use 函数 如 代码 清单 16-10 所 示 。 程 序 中 虽然 有 一 些 抠 套 的 这 语句 ， 但 不 必 过 分 


担心 ， 重 要 节点 如 图 
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game.use("a ball of wool", "south") 


在 这 个 方向 上 No 
有 挑战 吗 ? 


Yes 


玩家 手中 有 9 
物品 吗 ? 


Yes 
它 是 应 对 挑战 的 No 
正确 物品 吗 ? 

Yes 


renderMessage (challenge.success) ; 
challenge .complete = true; 


Yes 


该 物品 是 否 在 这 次 
挑战 中 耗 尽 了 ? 


代码 清单 16-10 ”use 函数 
(http://jsbin.com/yeqicu/edit?js) 


var use = function (item, direc 
if (inPlay) { 
Var place = player.getPplac 


16-6 所 示 ， 读 者 可 以 顺 着 兔子 洞 下 去 探寻 其 工作 原理 。 


zenderMessage ( 
"you donmt need Eo use CHat thieren 
); 


renderMessage( 
"You don't have that item" 


) 


renderMessage (challenge.failure); 


*** The leopard snarls. *** 


*** The leopard chases the ball 
Of wool, purring loudly. *** 


player.removeItem (item); 


图 16-6 ”use 函数 中 所 做 出 的 关键 决策 


二 ©) .4 


(); ”// 获 取 指 定 方向 的 挑战 


var challenge = plac 


if ((challeng 


.getCchalleng 
=== undefined) | |challenge.complete){ // 检 查 挑 战 是 否 完 


(direction); 


// 成 或 该 挑战 不 存在 
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renderMessage ("You don't need to use that there"); 


} else { 
if (player.hasIitem(item)) { // 检 查 玩家 是 否 有 指定 物品 
if (item === challenge.requires) { 
renderMessage (challenge.success);// 显 示 成 功 消息 并 将 该 挑战 标 
// 记 为 已 完成 
challenge.complete = true; 
if (challenge.itemConsumed) { // 如 果 物 品 在 挑战 中 消耗 ， 从 玩 
// 家 中 删除 该 物品 
player.removeItem(item); 
} 
} else { 
renderMessage (challenge.failure); / /如果 玩 家 使 用 本 
// 错 误 的 物品 ， 则 
// 显 示 失 败 消息 
} 
} else { 
renderMessage ("You don't have that item"); // 让 玩家 知道 他 们 
// 并 不 拥有 所 需 
// 物 品 
} 
} else { 
renderMessage ("The game is over!"); 
} 
return ™"; 


}; 
在 以 上 代码 中 ， 函 数 在 开始 处 收集 所 需要 的 信息 : 


Var Place = player.getPplace(); 
var challenge = place.getChallenge (direction); 


在 玩家 指定 的 方向 有 可 能 没有 挑战 ， 因 此 需要 检查 是 否 存在 挑战 ; 


if ((challenge === undefined) || challenge.complete) { 
renderMessage ("You don't need to use that there"); 
} else { 


// 存在 需要 应 对 的 挑战 


} 


有 些 玩家 谈 遮 掩 措 ! 因此 需要 检查 他 们 是 否 拥 有 需要 的 物品 。 如 果 没 有 ， 就 礼貌 地 提示 
他 们 : 


if (player.hasItem(item)) { 
// 检查 它 是 不 是 合适 的 物品 


} else { 


renderMessage ("You don't have that item"); 
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他 们 正在 使 用 一 个 物品 来 应 对 一 场 实际 的 挑战 。 该 物品 是 否 为 正确 的 应 对 物品 ? 如 果 不 
是 ， 请 告诉 他 们 : 


if (item === challenge.redquires) { 
// 完成 挑战 
} else { 


renderMessage (challenge.failure); 
} 


很 好 ， 我 们 通过 使 用 get、go 和 use 函数 游历 了 仙境 。 这 些 函 数 本 来 并 不 太 烦琐 ， 但 是 
当 内 部 峰 套 了 太 多 层 的 让 和 else 时 ， 就 可 能 会 变 得 相当 腾 肿 。 歇 歇 脚 ， 品 品 茶 ， 牺 劳 御 劳 自 
己 ， 但 千 万 不 要 迟到 ， 耽 误 了 第 16.6 节 一 一 那 才 是 冒险 真正 开始 的 地 方 。 


16.6 ”The Crypt 一 一 运行 游戏 


游戏 运行 需要 我 们 创建 的 所 有 模块 ， 然 后 调用 game.init 方法 ， 将 地 图 数据 和 玩家 的 名 
称 传递 给 该 方法 。 图 16-7 显示 了 所 有 涉及 的 模块 。 


Utility 
Views 
PO Model Constructors 
DlayerView Controller 
Map Player 
placeView Controller 
Map data Place 
messageView 
Map builder 
图 16-7 游戏 The Crypt 中 的 各 个 模块 
以 下 代码 清单 用 于 加 载 模块 的 HTML 脚本 元 素 。 
代码 清单 16-11 加载 游戏 模块 (HTML) 
(http://jsbin.com/fociqo/edit?html,console) 
<script> 
console.log("Loading The Crypt ..."); // 让 玩家 知道 模块 正在 加 载 
</script> 
<!l-= Spacer ==> 


<script src="http://output.jsbin.com/juneqo.js"></script> 


<!-- Place 构造 函数 --> 
<script src="http://output.jsbin.com/vuwave.js"></script> 
<!-- Player 构造 函数 --> 


<script src="http://output.jsbin.com/nonari.js"></script> 
<!-- 玩 家 视图 --> 
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<script src="http://output.jsbin.com/zucifu 
<!-- 场 所 视图 --> 
<script src="nhnttp://output.jsbin.com/royine. 
<!-- 消 息 视 图 --> 
<script src="nhnttp://output.jsbin.com/jatofe. 
<!1-- 地 图 数据 --> 
<script src="nhnttp://output.jsbin.com/hozefe.] 
<!-- 地 图 构造 器 --> 


<script 


<script 


在 以 上 代码 中 ，HTML 中 有 一 个 特殊 的 初始 script 元 素 ， 与 其 他 script 元 素 不 同 ， 没 有 


src="http://output.jsbin.com/paqihi.] 
<!--- 游 戏 控制 器 --> 


src="http://output.jsbin.com/yeqicu 
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.js"></script> 
Ts"></SCELptS 
JS! /SCELBES 
S"></SCript> 


s"></script> 


:I S/SeripE> 


src 属性 ， 它 并 不 是 用 于 链接 到 要 加 载 的 文件 ， 而 是 直接 将 JavaScript 包含 在 两 个 script 标签 
之 间 。 因 为 加 载 模块 文件 可 能 需要 耗费 一 段 时 间 ， 所 以 应 该 


给 玩家 相应 的 反馈 信息 ， 告 诉 他 


们 游戏 正在 加 载 ! 


。 如 果 将 代码 放 在 HTML 中 就 可 以 立即 运行 ， 无 需 等 符 文 件 加 载 。 


以 下 代码 清单 16-12 显示 了 启动 和 运行 游戏 所 需 的 代码 。 


var pla 
var map 


game.in 


请 读者 隐藏 控制 台 上 的 JavaScript 面板 ， 运 行 游戏 ，] 
慎 ， 挑 战 失败 会 损 


16.7 The Crypt 


代码 清单 16-12 ”运行 游戏 
(http://jsbin.com/fociqo/edit?js,console) 


yerName = "Jahver"; 
= theCrypt.mapData; 


it(map, playerName); 


耗 健康 值 ! 


下 一 个 目标 


值得 庆祝 ! 我 们 已 经 成 功 创建 了 一 个 基于 控制 台 的 冒险 


可 交换 的 地 图 数据 (也 就 是 说 游戏 由 许多 部 分 组 成 )。 
顾 本 书 第 二 部 分 的 所 有 内 容 ， 其 核心 理念 就 是 如 何 有 


回 | 


于 始 探索 吧 ! 游戏 精彩 ， 务 必 谨 


游戏 ， 该 游戏 具有 模块 化 架构 和 


效 组 织 程序 代码 ， 以 便 应 对 更 大 


的 程序 。 现 在 ,我们 掌握 了 私有 变量 、 模 块 、 模 型 、 视 图 和 控制 器 ， 就 能 够 敬 驭 更 加 宏伟 的 


项 目 。 本 书 在 第 一 部 分 和 第 二 部 分 一 直 在 使 用 JS Bin 控制 
歼 ， 关 注 JavaScript 语言 的 核心 概念 。 在 第 三 部 分 ， 我 们 将 从 控 和 


台 ， 目 的 在 于 使 读者 能 够 心 无 旁 
台 转 入 HTML 和 Web 界 


一 


面 ， 成 长 为 网 络 开发 人 员 。 读 者 会 发 现 ， 在 本 书 前 两 个 部 分 中 精心 构建 的 有 组 织 的 代码 将 为 


第 三 部 分 的 网 络 帮 


发 提供 强 有 力 的 助 推力 。 


16.8 ”本 章 小 结 


国 使 用 控制 器 管理 模型 和 视图 。 控 制 器 响应 用 户 输入 ， 更 新 模型 ， 并 将 数据 从 模型 传 


北 到 视图 ， 


以 供 显示 。 
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第 二 部 分 -浏览 硕 中 的 JavaScript 


本 书 第 一 部 分 和 第 二 部 分 一 直 在 使 用 JS Bin 控制 台 作 为 编程 的 交互 平台 ， 目 的 在 于 让 读 
者 能 够 专注 学 习 JavaScript 代码 。 现在， 我 们 已 经 完成 上 述 任务 ， 下 一 步 将 使 用 网 页 作为 用 
户 界 面 ， 将 使 用 超 文本 标记 语言 (HTML ) 来 指定 演示 内 容 的 标题 、 段 落 和 列表 项 目 ， 还 将 
使 用 按钮 、 下 拉 列 表 和 文本 框 供 用 户 和 输入 。 我 们 还 会 使 用 模板 ， 作 为 从 用 户 输入 和 
XMLHttpRequest 对 象 获取 数据 生成 HTML 的 有 效 方式 ， 为 网 页 加 载 额外 的 数据 。 

本 书 第 三 部 分 还 将 介绍 如 何在 自己 的 计算 机 上 (而 不 是 在 JS Bin 上 ) 组 织 文件 ， 并 为 读 
者 在 读 完 本 书 之 后 继续 学 习 JavaScript 提出 一 些 后 续 建议 。 在 本 书 第 三 部 分 ， 游 戏 The Crypt 
经 过 HTML 改造 之 后 ， 能 够 随 着 玩家 探索 前 行 的 步伐 每 次 只 加 载 一 个 新 位 置 ， 而 不 需要 一 
次 性 加 载 所 有 位 置 。 
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第 17 草 


本 章 内 容 包 括 : 

图 使 用 HTML 显示 静态 内 容 

图 标签 、 元 素 和 属性 

图 常见 的 HTML 元 素 

图 使 用 JavaScript 操作 网 页 内 容 

图 把 游戏 The Crypt 切换 到 HTML 视图 


HTML: 


构建 网 页 


JavaScript 可 以 为 网 页 添加 交互 性 ， 例 如 对 用 户 单 击 按钮 做 出 反应 、 从 下 拉 荣 单 中 选择 
菜单 项 、 更 新 页 面 的 部 分 内 容 。 我 们 已 经 掌握 了 该 语言 的 基本 知识 ， 为 下 一 步 开 发 网 页 交互 


性 和 动态 内 容 做 好 了 准备 。 本 书 的 重点 依然 是 JavaScript， 但 也 需要 学 习 一 些 HTML， 以 便 
使 用 JavaScript 来 创建 和 操作 网 页 的 内 容 。 用 户 依然 可 以 使 用 JS Bin 来 添加 HTML， 并 在 


Output 面板 中 查看 生成 的 网 页 。 在 第 21 章 中 ， 
和 存放 自己 的 HTML、CSS 和 JavaScript 文件 。 


读者 会 看 到 如 何 脱离 JS Bin 沙 盒 环境 来 组 织 


我 们 已 经 在 前 面 章节 中 花 了 很 多 时 间 来 构建 一 个 模块 化 游戏 The Crypt， 如 果 能 够 把 该 


人 


游戏 从 控制 


4 


程 ， 简 直 太 不 可 思议 了 ! 


17.1 HIML CSS、 JavaScript 


个 1 


我 们 现在 要 构建 


台 上 显示 输出 轻松 切换 到 网 页 上 显示 和 输出， 我们 就 会 由 囊 地 感觉 到 自 
建 模块 化 程序 上 所 付出 的 努力 都 是 值得 的 。 现 在 仅仅 需要 几 行 代码 就 可 以 实现 上 述 切 换 过 


电影 评论 网 页 : My Movie Ratings (我 的 电影 评分 )， 


己 原 先 在 构 


构建 网 页 


展示 我 们 最 


喜欢 的 电影 信息 ， 以 及 对 这 些 电影 的 评价 (图 17-1)。 要 构建 这 样 的 页 面 ， 需 要 使 用 三 种 


语言 : 


(1) HTMIL 一 一 我 们 使 用 HTML 来 注释 页 面 的 文本 3 


指定 要 加 载 的 媒体 ， 使 用 HTML 


来 指定 标题 、 段 落 、 列 表 、 图 像 和 按钮 。 它 们 是 网 页 的 基础 层 和 基本 内 容 ， 是 我 们 希望 访问 


者 能 够 发 现 和 阅读 的 信息 。 
(2) CSS 一 一 我 们 


和 更 用 级 联 样 式 表 语 言 〈Cascading Style Sheets) 指定 页 面 的 外 观 、 颜 


色 、 字 体 、 边 距 、 边 框 等 。 
(3) JavaScript 一 一 我 们 使 用 
钮 单 击 、 旬 选 内 容 、 载 入 额外 数据 和 弹出 消息 。 


戏法 让 一 切 都 变 得 顺利 流畅 ， 改 善 了 用 户 体验 ， 提 高 了 使 用 效率 。 


它们 是 网 页 的 表示 层 ， 是 对 内 容 的 美观 处 理 。 
JavaScript 语言 为 页 面 添加 交互 性 


问 应 按 


接口 小 


， 使 用 JavaScript 
层 ， 正 是 这 些 用 户 


它们 是 网 页 的 行为 


17-1 包含 My Movie Ratings 页 面 的 三 个 屏幕 截图 


CSS 层 和 JavaScript 层 。 


， 并 显示 如 何在 HTML 基础 上 构建 


ULD 


JavaScript 开发 实战 


My Movie Ratings 


Brief info about my favorite movies. 
Movies My Movie Ratin 
Inside Out My Movie Ratings 


An emotional adventure inside the head Brief info about my favorite movies. 


Ms Movies 


» Amy Poehler 
es BillHader 
Directors Inside Out 
An emotional adventure inside the hea 
。 Ronnie del Carmen young girl. 
3 Re 


E Poehler Bill Hader 
Directors 


Pete Doctor Ronnie del Carmei 


用 HTML 排列 内 容 


CSS 设 计 风格 样式 


JavaScript 添 加 


进一步 的 交互 


TD From “http://null.jsbin.com": 
元 是 a 


| 


An emotional adventure inside the head of a 


young gil 


Actors 
Amy Poehler 置 Bill Hader 
Directors 


Ronnie del Carmen 


图 17-1 以 HTML 的 内 容 为 基础 ， 使 用 CSS 和 JavaScript 增强 页 面 的 外 观 样式 和 交互 性 


即使 没有 CSS 和 JavaScript， 用 户 也 可 以 访问 网 页 的 关键 信息 〈 见 图 17-1 左 侧 截图 )。 


hikuzi/edit?output 〈 用 户 需要 运行 JavaScript 才能 使 Rate 按钮 生效 )。 


17.1.1 加 载 图 层 
如 果 拥 有 自己 的 网 站 jahvers.crypt， 可 以 通过 


CSS 增加 了 视觉 样式 感 、 风 格 认 同感 和 精心 设计 感 ， 为 访问 者 提供 了 愉悦 的 浏览 体验 。 
图 17-1 右 侧 截图 显示 了 用 户 单 击 Rate 按钮 后 JavaScript 弹出 的 消息 。 
请 读者 链接 到 JS Bin， 去 直观 体验 一 下 My Movie Ratings 页 面 。 


序 在 We 基于 CSS 和 JavaScript 的 程序 在 http://jsbin.com/ 


基于 HTML 语言 的 程 


才 在 浏览 器 中 输入 网 页 的 网 址 jahvers.crypt/ 


movies.html 来 加 载 My Movie Ratings 网 页 。 浏 览 器 会 加 载 由 服务 
HTML 文档 movies.html。 该 文档 中 包含 了 CSS 代码 和 JavaScript 代码 ， 分 别 在 style 和 


script 标签 之 间 : 


<head> 
<title>My Movie Ratings</title> 
<style> 
/* 此 处 为 CSs 代码 */ 
</style> 
<script> 
/* 此 处 为 JavaScript 代码 */ 
</script> 
</head> 
<body> 
<! 一 此 处 为 网 页 显示 的 内 容 --> 
</body> 


请 读者 不 必 担 心 以 上 这 些 陌生 的 HTML 标签 ， 


本 书 将 在 17.2 节 9 


器 使 用 该 地 址 发 布 的 


Pp 有 所 介绍 。 我 们 很 清 


楚 程 序 模块 化 的 优势 (本 书 第 二 部 分 全 都 在 讲 模 块 化 )， 所 以 很 乐意 看 到 使 用 HTML 文件 加 
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载 CSS 模块 文件 和 JavaScript 模块 文件 ， 如 下 所 示 : 


<head> 
<title>My Movie Ratings</title> 
<link rel="stylesheet" href="movies.css" /> 


<script src="movies.js"></script> 


</head> 
<body> 

<! 一 此 处 为 网 页 显示 的 内 容 --> 
</body> 


读者 可 以 看 到 ，script 标签 位 于 要 加 载 的 JavaScript 模块 之 前 ，link 标签 位 于 要 加 载 的 


CSS 模块 之 前 。 当 浏览 器 读 取 HTML 文档 ; 
定 的 CSS 和 JavaScript 文件 。 在 第 21 章 


准备 显示 它 时 ， 将 加 载 由 link 和 script 元 素 所 指 


将 介绍 如 何 组 织 我 们 自己 的 HTML、CSS 和 


JavaScript 文件 。 现 在 ，JS Bin 在 为 我 们 组 织 这 些 文件 。 
17.1.2 在 JS Bin 中 加 载 图 层 


在 JS Bin 


上 运行 程序 时 ， 可 以 在 以 下 三 个 面板 上 添加 代码 : HTML、CSS 和 JavaScript 


面板 ，JS Bin 会 自动 合并 来 自 以 上 三 个 面板 的 代码 ， 将 CSS 和 JavaScript 嵌入 到 HTML ' 


并 在 Output 面板 上 显示 所 生成 的 网 页 。 


本 书 不 会 用 太 多 篇 幅 讲 解 CSS， 但 是 在 示例 中 出 现 CSS 时 ， 读 者 可 以 自己 链接 到 CSS 


面板 去 看 看 ， 其 代码 大 多 简单 明了 。 在 下 一 他， 我们 将 对 HTML 进行 一 次 简要 介绍 ， 然 后 
在 第 17.3 节 重 新 问 到 JavaScript。 
17.2 HIML 简略 介绍 

对 于 电影 评论 网 站 My Movie Ratings， 我 们 希望 在 网 站 中 包括 电影 标题 、 演 员 和 导演 列 


表 、 评 分 选择 以 及 一 个 能 提交 用 户 决定 的 按钮 。 
题 、 哪 些 文本 是 列表 项 、 哪 个 是 下 拉 列 表 、 哪 个 是 按钮 。 我 们 终于 不 再 使 用 控制 
色 世 界 ， 进 入 到 一 上 奇妙 多 彩 的 HIML 天 地 。 
E 释 和 标识 嵌入 到 文档 中 的 文本 与 媒体 。 注 释 指定 了 文本 的 每 一 部 
分 在 文档 结构 中 扮演 的 角色 ; 媒 


我 们 


那个 仅 有 空格 和 换行 字符 的 单 
使 用 HTML 来 泣 


因此 需要 一 种 方法 来 分 别 指定 哪些 文本 是 标 


台 了 ， 离 开 


旨 定 骨 


体 可 


Fk 


以 是 图 像 、 视 频 、 音 频 或 其 他 格式 的 文件 。 


注释 采用 成 对 出 现 的 标签 形式 。 例 如 ， 在 文档 中 ， 某 部 分 文本 有 可 能 是 标题 、 段 落 、 列 


表 项 或 引用 ， 就 需要 有 相应 的 各 种 标签 。 下 


看 文本 中 有 一 个 标题 和 一 个 段落 ， 每 对 标签 都 包 


括 一 个 表示 开始 的 标签 和 一 个 表示 结束 的 标签 : 


<hl>My Movie Ratings</h1> 


<p>Brief info about my favorite movies.</p> 


读者 可 以 看 到 ，HTML 使 月 


标签 ， 段 落 使 月 


明了 


月 <p> 和 </p> 标 签 》 


开始 和 结束 标签 包 训 该 部 分 的 文本 ， 标 题 使 用 <hl]> 和 </hl> 
为 了 指定 一 个 元 素 ， 开 始 和 结束 标签 总 是 成 对 儿 出 现 。hl 


标签 指定 了 一 个 标题 元 素 ，p 标签 指定 了 一 个 段落 元 素 。 
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当 Web 浏览 器 加 载 HTML 文档 时 ， 会 识别 标签 ， 并 在 内 存 中 为 页 面 模型 创建 对 应 的 元 


素 。 这 些 标 签 指定 了 要 创建 元 素 的 类 型 ， 标 签 之 间 的 文本 则 形成 了 元 素 的 内 容 。 


17.2.1 从 空白 页 面 开始 


向 页 面 添 加 内 容 之 前 ， 我 们 先 来 看 看 构成 空白 网 页 的 HTML。 如 果 在 JS Bin 上 创建 一 
个 new bin 并 查看 HTML 面板 ， 将 看 到 以 下 内 容 ( 本 书 已 经 对 其 格式 进行 了 重新 编排 )。 


<!DOCTYPE htmLl> 
<html> 
<head> 


~ 


<meta charset="utf-8"> 
<title>JS Bin</title> 


</head> 

<body> 

</body> 
</html> 


第 一 行 中 的 DOCTYPE 向 浏览 器 提供 了 正在 使 用 的 HTML 版 本 的 信息 ， 并 帮助 浏览 器 


决定 如 何 处 理 和 显示 该 页 面 。 


HTML 历经 多 年 发 展 ， 出 现 了 许多 版 本 和 变种 。 幸 运 的 是 ， 


<IDOCTYPE html> 是 最 新 版 本 (目前 是 HTML5) 的 简洁 速记 法 


o 


将 整个 文档 包 里 在 html 标签 中 。 文 档 包含 了 标题 head 和 正文 body 两 个 部 分 ， 标 题 部 
分 包含 了 文件 的 相关 信息 : 标题 和 字符 编码 。 正 文部 分 是 页 面 的 主要 内 容 ， 当 用 户 访问 网 页 


时 这 些 内 容 将 显示 给 用 户 。 本 


17.2.2 ”添加 内 容 


中 ， 所 有 网 页 都 将 使 用 这 种 基本 结构 。 


17-2 显示 ， 在 一 个 新 JS Bin 文档 的 body 标签 之 间 为 My Movie Ratings 添加 一 些 文 
本 ， 并 使 用 适当 的 HTML 标签 对 这 些 文本 进行 标记 ， 分 别 标记 为 标题 、 副 标题 和 段落 。 


画 Fiev Addlibrary Share 
HTML ~ 
1 <!DOCTYPE htmL> 
2 <html> 
3 <head> 
<meta charset="utf-8"> 
5 <title>Listing 17.01¢/title> 
6 </head> 
7 <body> 


<hli>My Movie Ratings</h1> 


HTML CSS JavaScript Console Output Cg Account Blog Help 


Output Run with Js Auto-run JS 出 


My Movie Ratings 
Brief info about my favorite movies. 


Movies 


11 <p>Brief info about my favorite movies.</p> Inside Out 
12 


<h2>Movies</h2> 


<h3>Inside Out</h3> 


An emotional adventure inside the head of a young girl. 


<p>An emotional adventure inside the head of a young girl.</p> 


19 </body> 
20 </html> 


HA 


图 17-2 标题 和 段落 的 层次 结构 


浏览 器 通过 使 用 不 同 的 字体 大 小 来 表示 标题 的 层次 结构 : hl、h2、h3。 以 下 代码 清单 


17-1 显示 了 用 于 网 页 body 标签 之 间 的 HTML。 
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代码 清单 17-1 My Movie Ratings 一 一 标题 和 段落 (HTML) 
部 (http://jsbin.com/nosiwi/edit?html,output) 


<body> <!-- 将 网 页 上 显示 的 内 容 放 在 body 标签 之 间 --> 
<hl>My Movie Ratings</h1> <!-- 对 页 面 上 的 主 标题 使 用 hl 标签 --> 
<p>Brief info about my favorite movies.</p> 
<h2>Movies</h2> <!-- 对 多 级 副标题 使 用 标题 标签 h2，h3 等 --> 


<h3>Inside Out</h3> 
<p>An emotional adventure inside the head of a young girl.</p> 


<!-- 将 段落 包含 在 p 标签 中 --> 


</body> 


17.2.3 ”标记 列表 


每 部 电影 都 包括 演员 列表 和 导演 列表 ，HTML 使 用 i 标签 来 标记 列表 项 元 素 。 只 有 一 个 
演员 的 单个 列表 项 如 下 所 示 : 


ee 


<li>Amy Poehler</1i> 
列表 项 是 列表 的 一 部 分 ， 如 果 我 们 认为 列表 项 的 顺序 很 重要 ， 就 使 用 有 序列 表 ， 否 则 使 


用 无 序列 表 。 对 于 有 序列 表 ， 我 们 可 以 使 用 ol 标记 ， 对 于 无 序列 表 则 使 用 ul 标记 。 图 17-3 
显示 了 演员 和 导演 列表 ， 代 码 清单 17-2 显示 了 该 代码 。 


[= 
国 Fie- Addibray Share HTML CSS JavaScript Console Output BE Account Blog Hep 


Output RunwithJs Auto-run JS 
1 <!DOCTYPE htmL> 
2 <html> 让 . 
3 head> My Movie Ratings 
4 <meta charset="utf-8"> 
<title>Listing 17.02</title> 


6 </head> Brief info about my favorite movies. 
<body> 
9 <hl>My Movie Ratings</h1> Movies 
10 <p>Brief info about my favorite movies,</p> 
11 
12 。 <h2>Movies</h2> Inside Out 
1 
14 <h3>Inside Out</h3> An emotional adventure inside the head of a young girl. 
15 <p>An emotional adventure inside the head of a young girl.</p> 
16 Actors 
17 <h4>Actors</h4> 
18 <ul> 
19 <Li>Amy Poehler</li> . Amy Poehler 
0 <Li>BiLL Hader</li> e BillHader 
</ul> 
Directors 
<h4>Directors</h4> 
<otL> 
25 <Li>Pete Doctor</li> 1. Pete Doctor 
26 <Li>Ronnie del Carmen</1i> 2. Ronnic del Carmen 


</oL> 


29 </body> 
9 </html> 


图 17-3 ”浏览 器 使 用 数字 1. 和 2. 呈现 有 序列 表 ， 使 用 项 目 符号 .呈现 


代码 清单 17-2 ”有 序 和 无 序列 表 (HTML) 
(http://jsbin.com/vegahe/edit?html,output) 


<body> 
<hl>My Movie Ratings</n1> 
<p>Brief info about my favorite movies.</p> 
<h2>Movies</h2> 
<h3>Inside Out</h3> 


<p>An emotional adventure inside the head of a young girl.</p> 
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<h4>Actors</h4> 
<ul> <!-- 使 用 ul 标签 创建 无 序列 表 --> 


<li>Amy Poehler</1i> <!-- 将 每 个 列表 项 置 于 表示 开始 和 结束 的 1i 标签 之 间 --> 


<1i>Bill Hader</1i> 

</ul> 

<h4>Directors</h4> 

<ol> <!-- 使 用 ol 标签 创建 有 序列 表 --> 
<l1i>Pete Doctor</1i> 
<li>Ronnie del Carmen</1i> 

</ol> 
</body> 


人 


如 图 17-3 所 示 ， 浏 览 器 自动 为 有 序列 表 添 加 表示 顺序 的 数字 编号 ， 为 无 序列 表 


目 符号 。 
17.2.4 “一些 常见 的 HTML 元 素 


图 17-4 是 由 一 些 常见 HTML 元 素 组 成 的 网 页 截 
读者 可 以 在 JS Bin 上 访问 该 页 面 : http://jsbin.com/nuriho/edit?html,css,output。 


而 


© 田 output.jsbin.com (0 OI 
日 加 | JSBin 
和 
hl. Heading 1 
The body of the page has a light yellow background. 
h2. Heading 2 


p. This is a paragraph, a block of text that flows from one line to the next. This is a paragraph, a block of text that 
flows from one line to the next. This is a paragraph, a block of text that flows from one line to the next. 


This paragraph is in a div along with the two lists below. The div has a blue background and some padding 
added with CSS. 
h3. Heading 3 
1. li. list item 1 in an ordered list, ol 
2. li. list item 2 in an ordered list, ol 
3. li. list item 3 in an ordered list, ol 
h3. Heading 3 
e li.listitem 1 in an unordered list, ul 


e li. listitem 2 in an unordered list, ul 
e li.listitem 3 in an unordered list, ul 


图 17-4 一 个 描述 HTML 元 素 的 网 页 


用 于 创建 图 17-4 中 页 面 的 标签 见 表 17-1。 虽 然 HTML 中 还 有 很 多 标签 ， 但 
内 容 已 经 足够 我 们 目前 使 用 。 
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。 元 素 内 容 是 对 该 元 素 的 具体 描述 。 


所 列 


A 
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表 17-1 一 些 用 于 包 讲 内容 的 常见 HTML 元 素 


标 签 元 素 具体 描述 

<h1> 标题 文档 的 主 标题 或 某 部 分 内 容 的 主 标题 
<h2>…<h6> 副标题 按 重 要 性 降序 排列 的 多 级 副标题 

<p> 段落 表示 段落 

<div> 分 隔 将 本 来 在 一 起 的 一 组 元 素 包 豆 为 文档 的 一 部 分 
<ol> 有 序列 表 包 庄 一 组 对 顺序 有 要 求 的 列表 项 〈 例 如 ， 带 有 编号 的 列表 ) 
<ul> 无 序列 表 包 右 一 组 对 顺序 无 要 求 的 列表 项 〈 例 如 ， 带 有 项 目 符号 的 列表 ) 
<li> 列表 项 将 单个 列表 项 包含 在 有 序 或 无 序列 表 中 

<head> 头 部 包 右 提供 文档 元 信息 的 元 素 ， 并 加 载 文档 所 需 的 额外 代码 
<body> 主体 包 庄 页 面 的 主要 内 容 ， 即 直接 显示 在 网 页 上 的 内 容 


17.3 ”使 用 JavaScript 向 Web 页 面 添加 内 容 


为 了 给 网 站 添加 些 乐趣 ， 我 们 决定 为 My Movie Ratings 网 站 的 访问 者 添加 随机 问候 
语 ， 如 图 17-5 所 示 。 用 户 四 次 访问 页 面 ， 看 到 四 条 不 同 的 问候 语 。 


outputjsbin.com 要 < output.jsbin.com 


My Movie Ratings My Movie Ratings 


Wassup! Ay up me duck! 


output.jsbin.com 区 图 output.jsbin.com 


My Movie Ratings 


图 17-5 来 自 网 页 的 随机 问候 语 


用 户 每 次 刷新 页 面 就 会 生成 一 条 新 的 随机 问候 语 。 请 在 JS Bin 上 尝试 运行 ， 
http://output.jsbin.conmy/mikura.html 。 以 下 两 个 代码 清单 显示 如 何 创 建 该 页 面 ， 运 行 
JavaScript， 这 些 随 机 问候 语 就 会 出 现 。 


3 代码 清单 17-3 ”使 用 JavaScript (HIML) 向 段落 添加 内 容 
站 (http://jsbin.com/mikura/edit?html,js,output) 


<p id="greeting">Welcome!</p> 
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代码 清单 17-4 ”使 用 JavaScript 向 段落 添加 内 容 
(http://jsbin.com/mikura/edit?html,js,output) 


function getGreeting () { 
var hellos = [ / /创建 一 个 问候 语 的 数组 
"Nanu nanul!l™, 
"Wassup!", 
TYol, 
"Hello movie lover!", 
"Ay up me duck!", 
"Hola!™" 
]; 
var index = Math.floor (Math.random()*hellos.length); // 生 成 从 零 到 小 于 
// 数 组 长 度 的 随机 
// 索 引 值 


return hellos[index]; 


} 


function updateGreeting () { 


para.innerHTML = getGreeting(); 


} 
var para = document.getElementById ("greeting"); // 获 取 对 段落 的 引用 
updateGreeting (); / /将 段落 的 内 容 设 置 为 一 条 随机 问候 语 


为 了 达到 以 上 效果 ， 我 们 需要 按照 下 列 步 又 进行 操作 ; 
(1) 为 HTML 中 的 元 素 分 配 id。 

(2) 通过 id 获取 JavaScript 中 元 素 的 引用 。 
(3) 使 用 该 引用 来 更 新 元 素 的 内 容 。 


17.3.1 通过 id 获取 元 素 


我 们 的 目标 是 在 段落 元 素 中 显示 问候 语 。 为 了 设置 问候 语 ， 需 要 在 JavaScript 中 得 到 对 
该 段落 的 引用 。 首 先 ， 为 HTML 元 素 设置 一 个 唯一 的 id 属性 : 


<P id="greeting">Welcome!</p> 


为 了 获取 JavaScript 程序 中 元 素 的 引用 ， 可 以 使 用 document.getElementByld 方法 ， 将 元 
素 的 id 作为 参数 传递 给 该 方法 : 


Var para = document .getElementById ("greeting"); 


网 页 浏览 器 可 以 让 JavaScript 代码 使 用 document 对 象 ，document 对 象 拥 有 的 属性 和 方 
法 可 让 用 户 与 页 面 上 的 元 素 层 次 结构 进行 交互 。 
程序 已 经 通过 使 用 document.getElementById 获取 了 对 段落 元 素 的 引用 ， 在 将 该 引用 赋 
值 给 para 变量 后 ， 就 可 以 使 用 para 变量 来 操作 元 素 ， 然 后 通过 设置 元 素 的 innerHTML 属性 
来 更 新 段落 的 内 容 ; 


心 


para.innerHTML = "Ay up me duck!"; 
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以 上 内 容 更 新 为 : 


<p id="greeting">Ay up me duck!</p> 


17.3.2 ”函数 声明 


当 我 们 需要 定义 一 个 命名 函数 以 供 后 续 使 用 时 ， 可 以 使 用 函数 声明 而 不 是 函数 表达 式 : 


var sayHello = function () { // 
console.1log ("Hello"); // 将 函数 表达 式 分 配给 变量 
} ph 
function sayHello () { 7 
console.1log ("Hello"); // 函 数 声 明 
} 7 


在 本 书 第 4 章 ， 曾 经 提 及 函数 声明 ， 它 是 一 种 定义 函数 的 奉 代 语法 。 在 本 书 前 面 章节 
中 ， 我 们 一 直 在 使 用 表达 式 ， 将 变量 值 赋值 给 变量 ， 将 对 和 象 赋值 给 变量 ， 将 数组 赋值 给 变 


量 ， 以 及 将 函数 赋值 给 变量 ， 如 下 所 示 : 


Var num = 4; 
Var movie = {1}; 
[1]; 


var getRating = function () {}; 


var actors = 


对 于 命名 函数 ， 更 常见 的 定义 方法 是 函数 声明 ， 而 不 是 函数 表达 式 。 从 本 书 的 第 三 部 分 


开始 ， 我 们 就 不 再 使 用 函数 的 表达 式 ， 而 改 为 使 用 函数 声明 。 


17.3.3 ”什么 ?不 能 运行 JavaScript? 


偶尔 ， 访 问 者 可 能 会 使 用 无 JavaScript 或 禁用 JavaScript 的 设备 来 访问 网 站 ， 或 者 他 们 
上 网 的 速度 极 慢 ， 例 如 在 一 个 酒店 或 火车 上 ， 需 要 很 长 时 间 才 能 加 载 页 面 上 所 有 的 
JavaScript 模块 。 如 果 页 面 依 赖 JavaScript 来 显示 其 内 容 ， 那 么 这 些 访问 者 看 到 的 可 能 就 是 一 


片 空白 。 我 们 考虑 在 页 面 中 放 一 些 基 本 内 容 ， 以 免 访问 者 浪费 时 间 。 首 先 确 保 这 些 底层 的 基 


本 内 容 人 人 可 见 ， 而 那些 表层 JavaScript 所 带 来 的 额外 灵动 和 华丽 仅 供 有 能 力 处 理 JavaScript 


的 设备 使 用 。 
在 以 上 代码 清单 17-3 中 ， 随 机 问候 测试 网 页 中 就 包含 了 一 条 初始 的 HTML 


问候 语 


“Welcome!”。 尽 管 随机 问候 语 可 以 增加 趣味 性 ， 但 并 不 是 必需 元 素 。 在 读者 学 会 如 何 向 段落 


添加 文本 后 ， 就 可 以 一 步 一 步 地 添加 所 有 其 他 元 素 了 。 


17.4 ”显示 数组 中 的 数据 


My Movie Ratings 网 站 上 的 每 部 电影 都 有 一 个 标题 和 一 行 摘要 。 图 17-6 显示 了 网 站 上 


的 一 个 列表 ， 分 别 是 三 部 电影 : 
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My Movie Ratings 
。 Inside Out 
An emotional adventure inside the head of a young girl. 
。 Tomorrowland 
Recreating the hope and wonder of previous generations. 
。 The Wizard of Oz 


Strangers find friendship and strength on a long walk. 


图 17-6 一 个 电影 列表 


给 定 一 些 电 影 数据 ， 就 将 其 插入 到 页 面 上 的 现 有 元 素 中 。 电 影 数据 如 下 所 示 : 


var moviesData = [ 
{ 
"title" : "Inside Out", 
"summary": "An emotional adventure inside the head of a young girl." 
}, 
{ 
"title" : "Tomorrowland", 
"summary": "Recreating the hope and wonder of previous generations." 
} ， 
{ 
"和 E 生 志 EE Phe WizZard OE OZ" 
"summary": "Strangers find friendship and strength on a long walk." 


]; 


我 们 在 页 面 上 放置 了 一 个 id 为 movies 的 div 元 素 ， 使 用 div 元 素 作 为 容器 将 相关 元 素 
收集 到 一 起 ， 如 以 下 代码 清单 17-5 所 示 。 


BB。 代码 清单 17-5 创建 带 有 JavaSeript 的 HTML 
加 (http://jsbin.com/jakowat/edit?html,js,output) 
<body> 
<hl>My Movie Ratings</nh1> 


<div id="movies"></div> 
</body> 


每 个 电影 都 是 无 序列 表 中 的 列表 项 ， 浏 览 占 会 自动 将 列表 项 目 添加 到 无 序列 表 


UD 


。 下 面 


312| ”的 代码 清单 用 于 显示 电影 的 JavaScript。 


GS 代码 清单 17-6 ”使 用 JavaScript 构建 HTML 
加 (http://jsbin.com/jakowat/edit?html,js,output) 


Var moviesData = [ /* As above */ ]; 
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function getMovieHTML (movie) { // 使 用 getMovieHTML 函数 为 一 个 电影 生成 一 
// 个 HTML 字符 串 
Var html = "<h3>" + movie.title + "</h3>"; 


html += "<p>" + movie.summary + "</p>"; 
return html; 
} 
function getMoviesHTML (movies) { // 使 用 getMoviesHTML 函数 为 电影 数组 生 
// 一 个 HTML 字符 串 


T 


成 


Var html = "" 7 


movies .forEach (function (movie) { 
html += "<1i>"+getMovieHTML (movie)+"</1i>";// 通 过 在 1i 标签 中 包 理 
//getMovieHTML 函数 的 返回 值 来 创建 列表 项 


}); 
return "<ul>" + html + "</ul>"; // 使 用 ul 标签 将 所 有 列表 项 包 库 在 无 序列 表 中 


} 
function render (movies) { 
Var moviesDiv = document .getElementByIlId ("movies"); // 使 用 电影 的 Id 


// 更 新 元 素 的 
//innerHTML 
moviesDiv.innerHTML = getMoviesHTML (movies); 
} 
render (moviesData); // 向 render 传递 其 所 需 数据 ， 调 用 render 方法 


2 


以 上 代码 中 ，getMovieHTML 方法 将 movie 对 象 的 属性 包 于 在 相应 的 开始 标签 和 结束 标 
签 之 间 ， 构 建 单个 影片 的 HTML， 如 下 所 示 : 


Var html = "<h3>" + movie.title + "</h3>"; 
html += "<p>" + movie.summary + "</p>"; 


getMoviesHTML 方法 遍历 整个 电影 数组 ， 构 建 了 所 有 电影 的 HTML。 也 就 是 说 ， 使 用 
getMovieHTML 函数 可 获取 每 个 电影 的 HTML， 并 将 返回 的 字符 串 包装 在 fi 标签 中 以 创建 列 
表 项 元 素 ， 如 下 所 示 : 


movies.forEach (function (movie) { 
html += "<11>" + getMovieHTML (movie) + "</1i>"; 
}); 


然后 ， 将 生成 项 目 列 表 的 HTML 放 在 ul 开始 标签 和 结束 标签 之 间 ， 以 此 获得 无 序列 
表 ， 并 返回 一 个 完整 的 HIML 字符 串 ， 如 下 所 示 : 


TetUrn “<ULl>"™ + html + "</uUL>™; 
getMoviesHTML 消 数 返回 的 HTML 内 容 (但 不 包含 换行 符 和 额外 的 空格 ) 如 下 所 示 : 


:4b 
<1i> 
<h3>Inside Out</h3> 
<p>An emotional adventure inside the head of a young girl.</p> 
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去 /于 工交 
<1i> 
<h3>Tomorrowland</h3> 


<p>Recreating the hope and wonder of previous generations.</p> 
</1i> 
<1i> 
<h3>The Wizard of Oz</n3> 
<p>Strangers find friendship and strength on a long walk.</p> 
</11> 
</ul> 


render 方法 是 一 个 演 染 页 面 的 函数 ， 首 先 获取 页 面 上 目标 div 的 引用 ， 然 后 利用 
getMoviesHTML 函数 返回 的 HTML 字符 串 设置 目标 div 的 innerHTML 属性 : 


Var moviesDiv = qocument .getElementById ("movies") ， 


moviesDiv.innerHTML = getMoviesHTML (movies); 


为 了 减少 使 用 全 局 变量 的 数量 ， 可 以 将 getMovieHTML、getMoviesHTML 和 render 消 
数 包 装 在 立即 调用 函数 表达 式 (IIFE， 参 见 第 13 章 ) 中 ， 该 函数 表达 式 仅 在 其 接口 处 返回 
render。 本 章 中 创建 的 电影 列表 很 简单 ， 目 的 在 于 使 读者 集中 注意 力 ， 重 点 学 习 如 何 生 成 
HTML 以 及 如 何 更 新 网 页 上 的 元 素 。 


17.5 ”游戏 The Crypt 一 一 用 网 页 视图 方式 显示 玩家 和 地 点 


在 前 面 章节 中 ， 我 们 已 经 将 The Crypt 程序 分 解 为 多 个 模块 ， 每 个 模块 都 是 可 以 单独 加 
载 的 代码 段 ， 各 自 执 行 着 不 同 的 任务 : 数据 、 模 型 、 视 图 和 控制 器 《图 17-7)。 


Utility 
Views 
时 Model Constructors 

0 Controller 

Map Player 
placeView Controller 
Map data place 
messageView 


Map builder 


图 17-7 游戏 The Crypt 的 各 个 组 成 模块 


模块 的 优势 在 于 开发 者 可 以 通过 切换 模块 来 轻松 改变 程序 的 执行 动作 。 下 面 ， 我 们 就 利 
用 模块 知识 ， 按 照 以 下 步骤 创建 一 个 HTML 版 本 的 The Crypt。 

(1) 更 新 玩家 视图 〈 两 行 代码 )。 

(2) 更 新 场 所 视图 〈 两 行 代码 )。 

(3) 创建 一 个 HTML 页 面 ， 包 含 用 来 加 载 所 有 游戏 模块 的 script 元 素 ， 以 及 预备 给 玩家 
和 场所 视图 来 填充 的 占 位 符 。 


278 


第 17 章 HTML: 构建 网 页 


在 所 有 的 部 件 都 到 位 之 前 ， 我 们 还 看 不 到 任何 输出 ， 但 是 又 想 了 解 正在 创建 的 内 容 。 
图 17-8 显示 了 HTML 游戏 的 运行 情况 : 右 侧 输出 显示 了 玩家 和 场所 的 当前 状态 ， 左 侧 是 用 
户 在 控制 台 上 输入 的 命令 。 


四 Filev Addlibrary Share HTML CSS JavaScript Console Output 国 Account Blog Help 
Console Clear Output Run with JS Auto-run JS 内 
2 "x 炎炎 A zombie sinks its teeth into your neck. x*xx*" 

The Crypt 


》 game.go("west") 


You are in a kitchen。 There is a disturbing smel1l。 
Items: 


Exits from The Kitchen: 


Items: 
- The Sword of Doom 


- a piece of cheese 
突 册 容光 突 奖 宙 炎 灾 册 突 册 淆 次 次 风 炎 容光 内 类 突 内 风灾 内 风灾 次 奖 灾 风灾 交 庚 如 突 册 突 各 


面板 输入 命令 和 消息 ， 在 输出 面板 上 显示 更 新 信息 


图 17-8 ”The Crypt 使 用 控制 台 
在 介绍 玩家 和 场所 视图 的 新 版 本 之 前 ， 我 们 再 来 体会 一 下 模块 化 方法 的 巨大 优势 。 
render 方法 可 以 为 每 个 视图 显示 信息 ， 为 了 彰显 其 魅力 ， 下 一 节 的 程序 中 全 部 使 用 render。 
17.5.1 ”更 新 玩家 和 场所 视图 模块 一 一 render 方法 


为 了 将 游戏 从 控制 台 应 用 程序 转变 为 Web 应 用 程序 ， 我 们 需要 更 新 玩家 和 场所 视图 。 
新 版 本 的 游戏 将 文本 插入 到 网 页 元 素 中 来 显示 信息 ， 而 不 是 将 信息 输出 到 控制 台 上 ， 这 是 程 
序 所 需要 做 出 的 唯一 改变 (图 17-9)， 只 是 一 个 小 变化 。 


wal 欲 将 游戏 从 基于 控制 台 模 式 切 换 到 
Views 基于 网 页 模式 ， 只 需要 更 新 视图 
ot Model Constructors ] 
BY re Controller 
Map Player 
placeView Controller 
Map data place 


messageView 


Map builder 


图 17-9 只 需要 更 新 视图 即 可 将 The Crypt 游戏 切换 到 Web 版 本 


在 第 15 章 中 ， 视 图 仅 在 render 方法 中 使 用 了 console.log， 正 是 基于 这 样 的 精心 设计 ， 
现在 只 需要 对 这 一 个 地 方 做 出 修改 即 可 将 The Crypt 游戏 切换 到 Web 版 本 。 
基于 控制 台 的 玩家 视图 render 方法 如 下 所 示 : 
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function render (player) { 
console.log (getInfo (player.getData())); 


}; 
基于 控制 台 的 场所 视图 render 方法 如 下 所 示 : 


function render (place) { 
console.log (getIinfo (place.getData ())); 


}; 


运用 本 章 知识 更 新 网 页 元 素 ， 新 的 场所 视图 render 方法 如 下 所 示 : 


function render (place) { 


Var placeDiv = document.getElementById("place"); 
placeDiv.innerHTML= getInfo (place.getData ()); 


}; 


新 的 玩家 视图 render 方法 与 上 述 场所 视图 render 方法 几乎 相同 : 


function render (player) { 
Var playerDiv = document .getElementById ("player"); 


playerDiv.innerHTML= getIinfo(player.getData()); 


}; 


以 上 对 JavaScript 所 


改 的 改变 满足 了 我 们 的 需要 。 新 的 方法 使 用 document. 


getElementById 来 获取 网 页 上 的 元 素 引 用 。 在 创建 代码 清单 17 
并 不 存在 ， 


17.5.2 更 新 玩家 和 场所 视图 模块 一 一 代码 清单 


9 [ 


的 网 页 之 前 ， 
因此 无 法 测试 新 视图 。 请 读者 别 着 急 ， 我 们 号 上 就 可 以 获得 这 些 元 素 。 


代码 清单 17-7 显示 了 更 新 render 方法 后 的 玩家 视图 ， 本 书 省 略 了 与 第 15 章 中 完全 相同 


的 函数 体 ， 欲 查看 完整 的 代码 清单 ， 读 者 可 以 使 用 代码 清单 
代码 清单 中 出 现 的 “use strict”， 将 在 17.5.3 节 之 后 进行 讨论 。 


局 


代码 清单 17-7 基于 Web 版 本 的 玩家 视图 
(http://jsbin.com/cehexi/edit?js,console) 


(funetion (OO 1 
"Use strict™,; 
function getNameInfo (playerData) { ... } 
function getHealthIinfo (playerData) { ... } 
function getItemsInfo (playerData) { ... } 
function getTitleInfo (playerData) { ... } 


function getInfo (playerData) { ... } 


function render (player) { 


Var playerDiv=document .getElementById ("player"); 


playerDiv.innerHTIML=getInfo (player .getData () ); 
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// 通 过 更 新 render 方法 来 处 理 网 页 元 素 


// 获 取 id 为 
//“player” 的 div 
/ /元素 引用 
// 设 置 div 的 内 容 
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// 为 getInfo 方法 生 
// 成 的 字符 串 


} 
if (window.theCrypt === undefined) { window.theCrypt = {}; } 


theCrypt.playerView = { render: render }; 
}) (); 


以 下 代码 清单 17-8 显示 了 更 新 render 方法 后 的 场所 视图 。 


居 代码 清单 17-8 ”基于 Web 版 本 的 场所 视图 
Dy (http://jsbin.com/cakine/edit?is,console) 


(function () { 


"Use stelet "> 


function getItemsInfo (placeData) .1} 
function getExitsInfo (placeData) se 
function getTitleInfo (placeData) ee 
function getInfo (placeData) { ... } 


function render (place) { // 通 过 更 新 render 方法 来 处 理 网 页 元 素 
var placeDiv = document .getElementById("place"); // 获 取 id 为 “place” 
// 的 div 元素 引用 
placeDiv.innerHTML = getInfo(place.getData());// 将 div 的 内 容 设置 为 
//getInfo 方法 生成 
/ /的 字符 串 


} 
if (window.theCrypt === undefined) { window.theCrypt = {}; } 


theCrypt.placeView = { render: render }; 
}) (); 


从 以 上 代码 可 见 ， 我 们 只 需 对 render 方法 进行 修改 ， 就 可 以 成 功 地 将 玩家 和 场所 的 信息 
显示 从 控制 台 移 动 到 网 页 。 虽 然 信息 显示 已 经 切换 到 Web 版 ， 但 是 目前 用 户 还 是 只 能 在 控 
制 台 上 发 布 命令 。 


17.5.3 ”使 用 JavaScript 严格 模式 


因为 JavaScript 已 经 应 用 在 数 百 万 个 网 页 上 ， 所 以 要 确保 在 JavaScript 不 断 发 展 和 进化 
的 同时 ， 这 些 页 面 还 能 够 继续 正常 运行 。 为 了 看 到 更 多 的 报错 提醒 ， 为 了 优化 语言 的 运作 ， 
为 了 给 JavaScript 未 来 新 版 本 做 好 准备 ， 我 们 可 以 采用 严格 模式 来 运行 代码 。 严 格 模式 的 具 
体 做 法 就 是 在 函数 的 头 部 添加 "use strict" 表达 式 ， 如 以 上 代码 清单 17-7 和 17-8 所 示 。 

本 书 中 的 所 有 代码 都 能 够 以 严格 模式 运行 ， 但 直至 代码 清单 17-7 才 第 一 次 明确 提出 严 
格 模式 的 概念 ， 是 因为 本 书 作 者 考虑 读者 在 学 习 JavaScript 基础 知识 时 就 关注 严格 模式 有 可 
能 会 分 散 注意 力 。 欲 了 解严 格 模式 的 更 多 信息 ,可 以 访问 www.room51.co.uk/js/strict- 
mode.html。 


17.5.4 加载 模块 并 在 HTML 中 添加 占 位 符 


以 下 代码 清单 17-9 显示 了 基于 Web 版 本 的 完整 HTML 游戏 ， 包 括 用 于 加 载 所 需 模块 
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代码 清单 17-9 ”基于 Web 的 游戏 The Crypt (HTML) 
(http://jsbin.com/zaxaje/edit?html,console,output) 


<!IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>The Crypt</title> <!-- 更 新 标题 --> 
</head> 
<body> 
<hl>The Crypt</h1> 
<div id="place"></div> <!-- 为 场所 信息 包含 一 个 id 为 “place” 的 div --> 
<div id="player"></div> <!-- 为 玩家 信息 包含 一 个 id 为 “player” 的 div --> 


<!-- 模 块 --> <!-- 加 载 游戏 运行 所 需 的 所 有 模块 --> 

<1== 人 CE ==> 

<script src="http://output.jsbin.com/juneqo.js"></script> 
< 1! 一 Place 构造 器 --> 

<script src="http://output.jsbin.com/vuwave.js"></script> 
<!--Player 构造 器 --> 

<script src="http://output.jsbin.com/nonari.js"></script> 
<!-- 玩 家 视图 --> 

<script src="http://output.jsbin.com/cehexi.js"></script> 
<!-- 场 所 视图 --> 

<script src="http://output.jsbin.com/cakine.js"></script> 
<!-- 消 息 视图 --> 


<script src="nt 
<!-- 地 图 数据 --> 
<script src="http://output.jsbin.com/hozefe.js"></script> 
<!-- 地 图 构造 器 --> 
<script src="http://output.jsbin.com/paqihi.js"></script> 
<!-- 游戏 控制 器 --> 
<script src="http://output.jsbin.com/yeqicu.js"></script> 

</body> 

</html> 


以 上 代码 中 ， 在 head 部 分 使 用 title 元 素来 设置 网 页 的 标题 。 在 JS Bin 环境 中 工作 时 ， 
页 面 标题 并 不 总 是 可 见 ， 但 是 在 浏览 器 环境 中 ， 通 常 使 用 网 页 标题 来 标记 显示 页 面 的 标签 页 
和 窗口 ， 并 用 标题 将 页 面 添加 为 书签 或 添加 到 收藏 来 。 以 上 代码 中 ， 将 用 于 加 载 模块 的 
script 标签 添加 在 body 结束 标签 之 前 ， 这 样 做 可 以 确保 程序 使 用 的 两 个 div 元 素 出 现在 页 面 
上 ， 以 便 以 后 更 新 玩家 和 场所 信息 。 

不 笠 的 是 ， 由 于 视图 中 使 用 了 spacer 命名 空间 来 格式 化 文本 内 容 ， 因 此 这 些 文 本 内 容 中 
包含 了 控制 台 上 的 换行 符 和 空格 符 ， 但 是 网 页 中 根本 不 使 用 这 些 换行 符 和 空格 ， 导 致 在 网 页 
上 所 有 玩家 和 场所 信息 连 成 一 片 ， 如 图 17-10 所 示 。 显 然 ， 这 样 的 输出 形式 并 不 好 看 ， 但 是 


tp://output.jsbin.com/jatofe.js"></script> 


de 
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并 不 影响 程序 的 运行 。 


加 File ~ Addlibrary Share 


Console Clear 


>》 game .get()| 


二 


17.5.5 ”添加 少许 CSS 


HTML CSS JavaScript Console Output 


图 17-10 文本 输出 虽然 连 成 
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国 Account Blog Help 


Output 


The Crypt 


====================== = The Kitchen Garden = 
=== 一 一 =============== You are in a small, walled garden. 
Items: - holy water Exits from The Kitchen Garden: - east 


案 米 来 六 六 六 洲 米 米 米 米 米 米 米 米 米 米 米 玉米 米 米 米 米 米 米 米 米 米 灯 玉米 玉米 米 术 六 兴 玉 宁 术 Jahver (50) 
六 六 六 六 六 六 六 六 六 六 水 六 六 六 六 六 六 六 本 术 六 六 六 六 本 术 六 六 本 林 六 六 术 六 本 林 术 六 本 本 Tfems* - The 
Sword of Doom 米 米 米 米 米 米 米 洲 米 米 米 洲 米 米 米 六 米 米 米 玉米 寄 闵 闵 闵 六 六 米 米 玉 素 六 来 闵 米 米 米 米 米 米 


Run with JS Auto-run JS 7 


- 片 ， 但 是 游戏 依然 可 以 运行 


如 何 解 决 在 网 页 上 文本 输出 连 成 一 片 的 问题 ? 别 筷 了， 在 JS Bin 上 还 有 一 个 CSS 面 
板 ! 它 用 于 为 页 面 上 的 元 素 指定 样式 ， 例 如 大 小 、 颜 色 、 边 距 、 边 框 等 。 仪 仅 使 用 儿 行 


CSS 代码 ， 束 可 以 让 浏览 器 执行 视图 模块 所 生成 的 换行 符 ， 


还 可 以 让 浏览 器 使 用 相同 规格 的 


字符 ， 如 同 控制 台 上 的 字体 一 样 。 以 下 代码 清单 17-10 就 是 添加 到 CSS 面板 上 的 代码 。 


> 


Cs 


0 (http://jisbin.com/toyahi/edit? css) 


div { 
white-space: pre; 
font-family: monospace; 


} 


代码 清单 17-10 ”基于 Web 的 游戏 The Crypt (CSS) 


以 上 第 一 条 规则 让 浏览 器 保留 div 元 素 中 文本 内 容 的 空格 字符 《〈 即 空格 和 换行 符 )。 第 


二 条 规则 指定 浏览 器 在 div 元 素 中 的 文本 使 


等 宽 字 体 。 页 面 中 正 是 使 用 div 元 素来 放置 玩 


家 信息 和 场所 信息 ， 因 此 现在 网 页 上 的 输出 格式 与 控制 台 上 的 输出 一 样 整洁 美观 ， 如 图 17-8 


所 示 。 
17.5.6 ”开始 玩 游戏 


玩家 依然 通过 控制 台 发 出 游戏 指令 get、go 和 use， 
打开 链接 http://jsbin.com/toyahi/edit?console,output， 


出 以 下 指令 : 


>game .get () 
>game .go ("south") 


>game .use ("a rusty key", 


上 述 采 
HTML 标签 (用 于 标题 、 


换行 符 和 空格 来 格式 化 输出 的 方法 3 
段落 和 列表 ) 来 表明 在 输出 中 不 同 信息 的 结构 。 在 本 书 第 19 章 


这 些 指令 就 是 一 些 game 方法 。 请 
开始 玩 游戏 吧 。 玩 家 可 以 在 控制 台 上 发 


"Northn) 


不 理想 。 我 们 希望 能 使 用 一 些 合适 的 
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[eo 
> 


JavaS 


将 讨论 模板 ， 读 者 会 看 到 一 种 更 好 的 格式 化 输出 方法 : 


cript 开发 实战 


信息 。 


当前 版 本 的 游戏 其 实 是 一 个 Web 版 和 控制 


上 - 太 


输入 命令 。 在 本 书 第 18 章 


息 ， 但 


日 仍然 强制 玩家 在 控制 台 


台 版 的 混合 


使 用 HTML 格式 化 玩家 信 


体 ; 


[= 
HI 


息 和 场所 


然 使 用 HTML 显示 一 些 信 


， 读 者 将 看 到 如 何 使 用 简 自 


的 表 


单元 素 ， 例 如 按钮 、 下 拉 列 表 和 文本 框 ， 让 玩家 直接 在 网 页 上 与 游戏 进行 交互 。 下 一 节 内 容 
是 为 后 续 的 完全 HTML 版 本 做 准备 ， 我 们 完全 可 以 再 次 更 改 场 所 视图 和 玩家 视图 ， 但 本 书 
在 下 一 节 中 选取 了 消息 视图 进行 改造 。 
17.5.7 ”准备 消息 视图 
为 了 完全 以 网 页 形式 呈现 用 户 界面 ， 我 们 必须 更 新 消息 视图 ， 以 便 在 网 页 上 而 不 是 控制 
台 上 显示 消息 。 以 下 代码 清单 17-11 显示 了 新 的 模块 代码 。 
党 代码 清单 17-11 ”Web 版 的 消息 视图 
Ti yy (http://jsbin.com/nocosej/edit?js,console) 
(ENGtEGY, A() 4 
"SS StL 
function getMessageInfo (message) { 
return 由 大 大 大 由 十 message 十 由 类 
} 
function render (message) { 
var messageDiv = document .getElementById ("messages") ;// 在 页 面 上 显示 消息 


17.6 


messageDiv.innerHTML = getMessageInfo (message); 


} 


function clear () 


{ ”// 定 义 一 种 方法 来 清除 任何 被 显示 消息 


息 


过 


Var messageDiv = document.getELementById ("messages'") ; 
messageDiv.innerHTML = ""; 


} 
if 


(window.theCrypt === undefined) { 


window.theCrypt = {}; 


} 


theCrypt.messageView = { 


render: render, 
clear: clear // 在 接口 中 包含 clear 方法 
}; 
}) () ;7 
本 章 小 结 


使 用 HTML 对 文本 进行 兴 


E 释 ， 指 定 文本 在 文档 结构 5 


列表 项 还 是 段落 。 


国 在 HTML 文档 前 放置 表示 其 文件 类 型 的 标签 
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FP 的 作用 ， 例 如 其 文本 是 标题 、 
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<1DOCTITYPE html> 


加 使 用 html 标签 来 包 里 整个 文档 : 


<html> ... </html> 


国 文档 的 head 元 素 包 含 该 文档 的 相关 信息 ， 例 如 文档 的 标题 和 字符 编码 : 


<head> 
<meta charset="utf-8"> 
<title>My Web Page</title> 
</head> 


图 文档 的 body 元 素 包 含 要 在 网 页 上 显示 的 内 容 : 


<body> . </body> 


国 使 用 与 内 容 相 应 的 标签 ， 例 如 标题 标签 <h1l>，<h2>，...，<h6>; 段落 标签 <p>; 列 


表 项 标签 <li>; 列表 标签 <ol> 和 <ul>。 
加 将 id 属性 添加 到 开始 标签 ， 来 指定 页 面 上 的 元 素 : 


<P id="message"></p> 


加 通过 使 用 document.getElementById 方法 从 JavaScript 获取 对 HTML 元 素 的 引用 : 


Var para = document .getElementByld ("message"); 


图 通过 设置 元 素 的 innerHTML 属性 来 更 改元 素 的 内 容 : 


para.innerHTML = "New text for the paragraph."; 
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第 18 对 控件: 获取 用 户 输入 


本 章 内 容 包 括 : 

图 使 用 按钮 启动 操作 

图 使 用 文本 框 和 下 拉 列 表 获 取 用 户 输入 
图 单 击 按钮 时 自动 调用 函数 


在 日 常生 活 中 ， 我 们 喜欢 使 用 按钮 。 无 论 是 在 亚马逊 上 购买 图 书 ， 在 推 特 上 点 赞 ， 还 是 
在 深 更 半夜 发 送 醉 酒 后 写 下 的 电子 邮件 ， 这 些 形态 各 异 的 按钮 都 是 我 们 难以 抵挡 的 诱惑 。 下 
面 ， 轮 到 我 们 来 发 号 施 令 了 ， 我 们 要 为 网 页 添加 按钮 ， 同 时 还 要 添加 文本 框 和 下 拉 列 表 。 

在 本 书 第 17 章 中 ， 我 们 已 经 切换 到 HTML， 并 使 用 JavaScript 向 网 页 添加 内 容 ， 但 是 
要 想 获 得 用 户 输入 ， 还 是 局 限 在 控制 台 上 。 作 为 现代 的 网 络 应 用 程序 ， 用 户 不 必 理 解 
JavaScript， 也 不 必 被 绑 在 控制 台 上 ， 只 需 通过 网 页 就 能 够 与 程序 实现 交互 。 

本 章 将 介绍 HIML 的 input、select 和 button 元 素 ， 让 用 户 将 信息 和 命令 输入 到 文本 框 
中 ， 从 下 拉 列 表 中 做 出 选择 ， 然 后 通过 单 击 按钮 启动 操作 。 读 者 将 看 到 如 何 设置 函数 ， 使 其 
在 单 击 按钮 时 被 自动 调用 。 

单 击 按钮 很 有 趣 ， 下 面 我 们 就 介绍 如 何 使 用 按钮 。 


18.1 使 用 按钮 


我 们 正在 建立 一 个 电影 评分 网 站 My Movie Ratings 〈 见 第 17 章 )。 当 访问 者 访问 该 网 站 
时 ， 会 出 现 随 机 问候 语 。 现 在 ， 我 们 希望 在 不 重新 加 载 整个 网 页 的 情况 下 ， 访 问 者 也 能 够 查 
看 到 更 多 的 问候 语 。 为 了 实现 上 述 想 法 ， 我 们 决定 在 测试 页 面 上 添加 一 个 按钮 ， 用 户 只 需 单 
击 该 按钮 ， 就 可 以 更 新 一 条 随机 问候 语 (图 18-1)。 


男 outputjsbin comjjosoqiK © D | 
y 士 


图 18-1 单 击 Say Hi 按钮 就 会 显示 一 条 随机 问候 语 


第 18 章 控件 获取 用 户 输 入 


具体 如 何 实现 ?如 何 使 JavaScript 程序 对 用 户 单 击 按钮 做 出 响应 ? 我 们 需要 做 三 件 事 ; 
(1) 向 页 面 添加 HTML 中 的 一 个 button 元 素 。 

(2) 编写 一 个 函数 来 更 新 间 候 语 。 

(3) 获取 一 个 单 击 时 就 调用 该 函数 的 按钮 。 


18.1.1 为 页 面 添 加 按钮 


在 HTML 中 添加 按钮 ， 只 需 使 用 HTML 的 按钮 元 素 button， 将 按钮 文本 放 在 该 元 素 的 
两 个 标签 之 间 即 可 ， 如 图 18-2 所 示 。 


<button>Button 1</button> 


Output 


1 “button>Button 1</button> Button1 Button2 Button 3 
2 “button>Button 2</button> 
3 “button>Button 3</button>| 


I 


图 18-2 ”生成 三 个 按钮 的 HTML 代码 及 


输出 


如 果 想 在 JavaScript 中 使 用 该 按钮 ， 需 要 在 HTML 中 为 其 指定 唯一 的 id 属性 : 


<button id="btnGreeting">Say Hi</button> 


以 下 代码 清单 18-1 显示 了 My Movie Ratings 测试 页 的 关键 HTML 语句 。 id 为 
“greeting” 的 段落 就 是 我 们 以 后 插入 随机 问候 语 的 地 方 。 


代码 清单 18-1 My Movie Ratings 上 带 按钮 的 问候 语 (HTML) 
(http://jsbin.com/josoqik/edit?html,output) 


<button id="btnGreeting">Say Hi</button> 
<p id="greeting">Welcome!</p> 


输出 结果 如 图 18-1 所 示 。 如 果 读 者 对 如 何 应 用 样式 感 兴 趣 ， 可 以 浏览 JS Bin 上 的 CSS 
面板 。 
18.1.2 ”编写 函数 来 更 新 间 候 语 


在 第 17 章 中 ， 我 们 编写 了 两 个 函数 getGreeting 和 updateGreeting， 用 于 选择 一 条 随机 的 
欢迎 消息 并 更 新 显示 。 


function getGreeting () { 
// 返回 随机 问候 语 
}; 


function updateGreeting () { 


para.innerHTML = getGreeting(); 
}; 
Var para = document .getElementBylId ("greeting"); 


updateGreeting (); 
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以 上 代码 中 ，updateGreeting 函数 通过 设置 段落 元 素 para 的 innerHTML 属性 来 更 新 


| 
Raul 


乞 
2 


目前 ， 我 们 已 经 掌握 了 HTML 中 的 按钮 和 段落 ， 还 有 一 个 更 新 段落 的 函数 。 下 面 ， 我 
们 和 希望 在 用 户 单 击 该 按钮 时 能 够 调用 updateGreeting 函数 。 
18.1.3 ”监听 单 击 

用 户 单 击 按钮 ， 网 页 上 就 会 弹出 “Wassup!” 再 次 单 击 按钮 ， 弹 出 “Hola!”……… 再 次 
单 击 按钮 ， 弹 出 “Ay up me duck!” 


现在 ， 我 们 想 发 出 以 下 指令 :“ 杀 爱 的 按钮 ， 请 在 有 人 单 击 您 时 调用 updateGreeting 函 
数 ”。 为 了 给 按钮 发 送 一 条 这 样 的 指令 ， 我 们 需要 在 JavaScript 中 引用 该 按钮 ， 如 下 所 示 : 


上 


Var btn = Qqocument .getElementById("btnGreeting") ， 


在 以 上 代码 中 ， 使 用 btn 引用 一 个 按钮 ， 其 实 就 是 告诉 按钮 ， 当 该 按钮 被 单 击 时 调用 一 
个 函数 : 


btn.addEventListener ("click", updateGreeting); 


addEventListener 方法 命令 按钮 (或 其 调用 的 元 素 )， 不 论 何 时 单 击 按钮 ， 只 要 指定 的 事 
件 (event) 发 生 就 调用 指定 的 函数 。 以 上 过 程 犹 如 updateGreeting 函数 一 直 等 待 ， 或 监听 
(listening) 按钮 被 单 击 的 那 一 刻 。 

以 下 代码 清单 18-2 是 随机 问候 语 测试 网 页 的 最 终 版 本 ， 它 与 第 17 章 中 的 代码 清单 基本 
相同 ， 但 添加 了 两 行 按钮 代码 ， 按 钮 代码 包含 在 立即 执行 的 函数 表达 式 中 ， 以 免 污染 全 局 命名 
空间 。 代 码 还 包括 一 个 “use strict” 语 句 ， 表 明 浏 览 器 使 用 了 严格 模式 ( 见 17.5.3 节 ) 。 


代码 清单 18-2 ”My Movie Ratings 上 带 按钮 的 问候 语 
My (http:/ijsbin.com/josoqik/edit?js,output) 


(function () { 
"use strict",; 
function getGreeting () { 
Var hellos=["Nanunanu!", "Wassupl!", "Yo!", "Hello movie lover!", 
"Ay up me duck!", "Hola!™ ]; 
Var index = Math.floor(Math.random() * hellos.lengtn); 
return hellos[index]; 
}; 
function updateGreeting () { 
para.innerHTML = getGreeting(); 
}; 
var btn = document .getElementById("btnGreeting"); // 获 取 对 按钮 的 引用 
Var para = qocument .getElLlementById ("greeting"); 
btn.addEventListener ("click" ,updateGreeting); // 单 击 按钮 时 调用 
//updateGreeting 函数 


updateGreeting(); 
1) (0) 2 
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请 读者 参看 本 书 第 12 章 ， 复 习 如 何 使 用 Math.floor 和 Math.random 为 数组 生成 随机 


索引 。 
3 
单 击 鼠 标 并 不 是 函数 监听 的 唯一 事件 ， 函 数 关注 的 事件 还 包括 鼠标 移动 、 页 面 滚动 、 
按 下 键盘 以 及 图 像 加 载 等 。 针 对 触摸 屏 和 移动 设备 ， 敲 击 屏 幕 、 在 屏幕 上 轻 划 手指 、 强 力 
按压 屏幕 以 及 摇动 手机 等 也 都 是 调用 函数 的 事件 。 
目前 ， 读 者 只 需 使 用 简单 的 单 击 按钮 即 可 ， 如 果 对 上 述 其 他 调用 函数 的 奇妙 事件 感 兴 
趣 ， 请 查看 Mozilla Developer Network 上 的 事件 引用 内 容 ， 网 址 是 https://developer.mozilla. 
人 要 


18.2 ”使 用 select 元 素 选 择 一 个 选项 


My Movie Ratings 网 站 用 于 请 用 户 对 电影 做 出 评价 。 用 户 从 下 拉 列 表 中 选择 
击 Rate 按钮 ， 该 页 面 就 会 显示 评分 消息 (图 18-3 )。 


My Movie Ratings 


Brief info about my favorite movies 
g 、 From "http://null.jsbin.com”: 
é 三 9 You gave Inside Out 4 stars! 


An emotional adventure inside the head of a young girl. 


评分 ， 并 间 


辣 
尽 
村 
| 


Movies 


Inside Out 


Actors 


Amy Poehler Bill Hader 


Directors 


Pete Doctor Ronnie del Carmen 


i 


带 有 用 户 评分 的 消息 


图 18-3 单 击 Rate 按钮 弹出 


要 实现 以 上 评分 系统 ， 我 们 需要 做 四 件 事 : 

(1) 向 页 面 中 添加 一 个 selectHTML 元 素 ， 其 option 元 素 对 应 每 个 评分 。 
(2) 向 页 面 中 添加 一 个 buttonHTML 元 素 ，Rate 作为 其 文本 。 

(3) 编写 一 个 函数 以 弹出 带 有 评分 的 消息 。 

(4) 单 击 按 钮 时 调用 该 函数 。 


18.2.1 ”向 页 面 中 添加 select 元 素 
Web 浏览 器 将 select 元 素 呈 现 为 下 拉 列 表 形 式 。 我 们 可 以 使 用 option 元 素来 指定 列表 中 
的 选项 (图 18-4)。 
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<select id="movies"> 


<option>Inside Out</option> 


<option>Tomorrowland</option> 


<option>The Wizard of Oz</option> 


</select> 


ML ~ 
<hl>Pick a number</h1l> 


<select> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
</select> 


<h1l>Pick a day</h1> 


<select> 
<option>Monday</option> 
<option>Tuesday</option> 

6 <option>Wednesday</option> 

17 <option>Thursday</option> 

18 <option>Friday</option> 

9 <option>Saturday</option> 

20 <option>Sunday</option> 

21 </select> 


OPOOVOOOAAONPAODP 


Output 


Pick a number 


Pick a day 


Monday 人 


加 File- Addlibray Share 


Output 


Pick a number 
1 司 


Monday day 


Tuesday 


Wednesday 


Friday 
Saturday 
Sunday 


图 18-4 《从 左 至 右 ) 两 个 select 元 素 的 HIML 代码 、 其 在 网 页 上 的 显示 以 及 正在 进行 选择 的 截图 


我 们 可 以 在 JS Bin 上 测试 以 上 人 代码。 首先， 同时 打开 HTML、Console 和 Output 三 个 
面板 ， 创 建 一 个 new bin; 然后 ， 使 用 以 上 代码 段 中 的 select 代码 替换 HTML 面板 的 内 容 ， 
就 会 看 到 有 下 拉 列 表 出 现在 Output 面板 上 ; 最 后 ， 在 控制 台 提示 符 下 输入 以 下 命令 : 


>var dd = document .getElementById ("movies") 


undefined 
>dd.value 
Inside Out 


从 Output 面板 的 下 拉 列 表 中 选择 不 同 的 电影 ， 然 后 使 


>dd.value 
The Wizard of Oz 


t 


我 们 也 可 以 用 JavaScript 更 新 下 拉 列 表 的 值 : 


>dd.value = "Tomorrowland" 


Tomorrowland 


] JavaScript 查看 其 新 值 : 


. 


在 JavaScript 中 设置 的 值 作为 下 拉 列 表 框 中 的 选项 显示 在 Output 面板 上 。 
18-4 显示 了 HTML 中 的 两 个 select 元 素 ， 以 及 这 两 个 元 素 在 网 页 上 的 呈现 形式 。 
以 下 代码 清单 18-3 是 My Movie Ratings 网 页 主体 部 分 的 HTML， 带 有 一 个 select 元 素 


和 一 个 button， 用 来 对 电影 进行 评估 。 
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代码 清单 18-3 ” 带 有 下 拉 列 表 的 My Movie Ratings (HTML) 
(http://jsbin.com/hikuzi/edit?html,output) 


<p>Brief info about my favorite movies.</p> 


<h2>Movies</h2> 


<div id="movieBox"> 


<h3 id="movie">Inside Out</h3> 


<p>An emotional adventur 


<h4>Actors</h4> 
<ul> 
<1i>Amy Poehler</1i> 
<l1i>Bill Hader</1i> 
</ul> 
<h4>Directors</n4> 
<ul> 
<1i>Pete Doctor</1i> 


inside the head of a young girl.</p> 


<li>Ronnie del Carmen</1i> 


</ul> 

<div class="controls"> 
<select id="rating"> 
<option>1</option> 
<option>2</option> 


<option selected>3</option> 


<option>4</option> 
<option>5</option> 
</select> 


<button id="rate">Rate</button> 


</div> 
</div> 


以 上 代码 中 ， 我 们 看 到 当 网 页 上 显示 下 拉 列 表 时 ， 可 以 添加 一 个 selected 


选择 了 该 选项 (以 上 为 第 3 个 选项 )。 


<!-- 使 用 select 元 素 添 加 一 个 下 拉 列 表 --> 
<!-- 使 用 option 元 素 将 选项 添加 到 列表 --> 


<!-- 指定 首选 项 --> 


<!-- 添加 button 元 素 --> 


性 表示 用 户 


al 


18.2.2 ”对 电影 进行 评分 的 函数 和 调用 该 函数 的 按钮 
为 了 对 影片 进行 评分 ， 我 们 需要 一 个 函数 从 下 拉 列 表 中 获取 用 户 的 选择 ， 在 select 元 素 


中 获取 所 选项 的 值 ， 然 后 弹出 包含 该 值 的 消息 ， 如 代码 清 


(= 


(funcstion () 4 


“Se. Streicts 


Var rateButton=document .getElementBylId ("rate"); 


单 18-4 所 示 。 


代码 清单 18-4 带 有 下 拉 列 表 的 My Movie Ratings 
(http://jsbin.com/hikuzi/edit?js,output) 


var ratingList = documen 


// 收 集 所 使 用 元 素 的 引用 


Var movi 


t.getElementBylId ("rating"); 


= document .getElementByIlId ("movie"); 
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function rateMovie () { 
var rating = ratingList.value; // 从 下 拉 代 码 清 单 中 获取 所 选 的 选项 
var movieTitle = movie.innerHTML; // 获 取 电 影 的 标题 


alert("You gave " + movieTitle + " "+ rating + " stars!"); 


// 使 用 alert 方法 弹出 消息 将 评分 存 入 数据 库 


} 
rateButton.addEventListener ("click", rateMovie); // 在 单 击 按钮 时 调用 


// rateMovie 方法 


I 


}) (); 
以 上 代码 中 ， 下 拉 列 表 的 value 属性 提供 了 用 户 评分 。 调 用 浏览 器 提供 的 alert 函数 ， 就 
可 以 在 弹出 对 话 框 中 显示 该 评分 。 将 代码 包装 在 函数 rateMovie 中 ， 使 用 addEventListener 来 
命令 Rate 按钮 ， 每 当 单 击 该 按钮 时 就 调用 rateMovie。 

现在 ， 用 户 已 经 可 以 从 列表 中 选择 评分 。 如 果 想 给 他 们 更 多 上 牛 


么 办 ? 


来 表达 意见 ， 该 怎 


18.3 ”使 用 文本 框 读 取 用 户 输入 


值得 庆贺 ， 我 们 的 电影 评分 网 站 现在 已 经 可 以 向 用 户 开 放 了 ! 网 站 的 成 功 让 我 们 进一步 
思考 : 如 果 用 户 想 要 撰写 评论 ， 该 怎么 办 ?如 何 能 让 用 户 在 评分 时 再 添加 一 个 简短 的 评论 ? 
图 18-5 显示 ， 该 网 站 上 已 经 添加 了 两 条 评论 ， 并 且 正 在 添加 第 三 条 评论 。 


Movies 


Inside Out 


An emotional adventure inside the head of a young girl. 


Actors 


Amy Poehler Bill Hader 


Directors 
Pete Doctor Ronnie del Carmen 


Comments 


Wow! (3 stars) The Best Everl (5 stars) 


Why the fuss? 2 Rate 


图 18-5 网 页 中 有 一 个 添加 评论 的 文本 杠 和 一 部 分 区 域 用 来 显示 评论 


ee 


Tt 


为 了 让 用 户 在 网 页 中 添加 评论 和 评分 ， 而 不 再 是 像 上 一 市 那样 只 是 弹出 评分 消息 ， 我 1 
允许 用 户 在 文本 框 中 输入 评论 ， 从 下 拉 列 表 中 选择 评分 ， 然 后 单 击 Rate 按钮 。 为 了 实现 上 
述 想 法 ， 我 们 需要 做 五 件 事 : 

(1) 在 页 面 上 添加 一 个 文本 框 。 

(2) 将 无 序列 表 添 加 到 HTML， 作 为 用 户 输 入 评论 的 地 方 。 

(3) 获取 JavaScript 中 文本 框 的 引用 并 访问 其 值 。 
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(4) 在 JavaScript 中 获取 对 评论 列表 的 引用 。 
(5) 更 新 rateMovie 函数 ， 将 新 的 评论 添加 到 评论 列表 。 
18.3.1 在 页 面 中 添加 文本 框 


我 们 使 用 HTML 中 的 input 元 素 向 页 面 添 加 文本 框 ， 其 type 属性 设置 为 “text*， 包 含 一 
个 引用 JavaScript 元 素 的 id 属性 : 


<input type="text" id="txtComment" /> 


我 们 使 用 input 元 素 在 网 页 上 显示 表单 控件 ， 不 包 于 任何 其 他 内 容 ， 因 此 没有 成 对 儿 出 
现 的 开始 标签 和 结束 标签 ， 这 称 作 自 动 闭合 (self-closing) 标签 。 请 读者 注意 该 标签 末尾 的 
正 斜 杜 ， 它 表明 此 标签 不 需要 结束 标签 。 文 本 框 处 于 “controls”div 中 ， 与 评分 下 拉 列 表 以 
及 Rate 按钮 一 起 显示 ， 如 下 代码 所 示 ; 


<div class="controls"> 
<input type="text" id="txtComment" /> 
<select id="rating"><!-- 评 分 选项 --></select> 
<button id="rate">Rate</button> 

</div> 


以 上 代码 中 ， 把 input 元 素 的 type 属性 设置 为 “text”， 束 会 在 页 面 上 显示 文本 框 。 在 编 
程 实 践 中 ，input 元 素 的 type 属性 通常 还 可 以 是 password、submit、checkbox 和 radio。 
Microsoft、Apple、Google、Mozilla 和 Opera 等 浏览 器 制造 商 正 在 致力 于 广 持 添加 新 的 输入 
元 素 类 型 〈 例 如 颜色 选择 器 、 日 期 选择 器 )。 想 要 了 解 有 关 输 入 元 素 类 型 的 更 多 信息 ， 读 者 
可 以 访问 Mozilla Developer Network， 网 址 为 https://developer.mozilla.org/en/docs/Web/HTML/ 
Element/Input。 


18.3.2 ”添加 无 序列 表 来 显示 评论 内 容 
我 们 可 以 使 用 ul 元 素 作为 评论 列表 ， 并 在 评论 内 容 前 面 加 上 标题 : Comments。 该 列表 
具有 id 属性 ， 以 供 我 们 在 JavaScript 中 添加 该 列表 项 ， 如 下 所 示 : 


<h4>Comments</n4> 


<ul id="comments"></ul> 


现在 ， 我 们 在 网 页 的 Actors (演员 ) 列表 和 Directors (导演 ) 列表 之 后 义 成 功 添加 了 


Comments (评论 ) 列表 。 


18.3.3 ”获取 对 新 元 素 的 引用 


为 了 读 取 用 户 输 入 到 文本 框 中 的 评论 ， 并 将 列表 项 添加 到 评论 列表 中 ， 我 们 需要 在 
JavaScript 代码 中 获取 对 两 个 元 素 的 引用 : 


var commentsList = document.getElementById("comments"); // 列表 
var commentBox = document .getElementById("txtComment"); // 文本 机 


我 们 可 以 通过 value 属性 访问 用 户 在 文本 框 中 输入 的 文本 。 要 查看 运行 中 的 value 属 
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性 ， 可 以 在 控制 台 上 对 其 访问 和 更 新 。 我 们 可 以 访问 My Movie Ratings 网 站 http:/jsbin. 
com/nevaxit/edit?console,output， 在 文本 框 中 输入 “Great Movie!”， 然 后 在 控制 台 提 示 符 下 输 


入 以 下 命令 : 


>var txt = document .getElementById ("txtComment") 


undefined 

>txt .value 

Great Movie! 

>txt.value = "Rubbish!" 
Rubbish! 


以 上 最 后 一 条 命令 将 更 新 网 页 上 文本 框 中 的 内 容 。 


18.3.4 ”更 新 rateMovie 函数 


以 下 代码 清单 18-5 显示 了 该 网 页 的 全 部 组 装 部 件 ， 我 们 将 文本 框 ! 
中 的 评分 作为 列表 项 目 附加 到 现 有 的 评论 列表 中 。 
3 代码 清单 18-5 电影、 评论 和 随机 问候 语 


本 (http://jsbin.com/nevaxit/edit?js,output) 


由 


L_j 


(Ef£uncetLon (4 


"Use Strict"™y 


的 评论 和 下 拉 列 表 


function getById (id) // 定 义 一 个 具有 较 短 名 称 的 函数 ， 
return document.getElementById (id); 


Var rateButton = getBylId("rate"); 
Var ratingList = getById("rating"); 


Var movie = getByld ("movie"); 


通过 id 获取 元 素 


var commentsList = getById("comments") ; // 获 取 对 元 素 的 引用 ， 该 元 素 用 于 评论 
var commentBox = getById("txtComment"); // 读 取 文本 框 中 的 文本 


function rateMovie () { 
var rating = ratingList.value; 


var movieTitle = movie.innerHTML; 


var comments = commentsList.innerHTML; / /获取 评论 列表 中 的 当前 列表 项 


Var comment = commentBox .value; 


comments += "<li>" + comment + " (" + rating +" stars)</1i>"; 
// 使 用 += 运 算 符 附 加 新 的 评论 和 评分 

commentsList.innerHTML = comments; // 更 新 评论 列表 

commentBox.value = ""; // 从 文本 框 中 删除 评论 


} 


rateButton.addEventListener ("click",rateMovie); // 单 击 按钮 时 调用 rateMovie 


/* 随机 问候 语 代码 - 见 代码 清单 18.2 */ 
}) () 7 


在 以 上 代码 清单 中 ， 需 要 获取 对 5 个 HTML 元 素 的 引用 ， 因 此 ， 我 们 创建 了 一 个 名 称 
较 短 的 函数 getById， 这 样 就 不 必 每 次 都 输入 document.getElementById(id) 这 么 长 的 名 称 了 。 
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以 下 代码 清单 18-6 显示 了 更 新 的 HTML 版 本 ， 包 括 文本 框 、 评 论 列 表 和 一 个 随机 问候 
语 需 要 的 span 元 素 。span 用 于 包 于 文本 ,我们 可 以 描述 使 用 该 文本 的 目的 ， 在 本 示例 中 为 
“greeting” 我 们 可 以 通过 id 来 改变 其 样式 更改 颜 色 、 使 其 粗 体 、 更 改 大 小 )， 我 们 还 可 以 
在 JavaScript 中 访问 该 文本 〔 例 如， 添加 一 条 随机 问候 语 )。 

body 元 素 的 内 容 如 下 所 示 ， 其 中 与 代码 清单 18-3 相同 的 内 容 已 经 省 略 或 删 减 ， 读 者 可 
以 在 JS Bin 上 查看 完整 版 代码 清单 。 
3 代码 清单 18-6 电影 、 评 论 和 随机 问候 语 (HTML) 
[De (http://jsbin.com/nevaxit/edit?html,output) 


<hl>My Movie Ratings</h1> 
<p>Brief info about my favorite movies. 
<span id="greeting">Welcome!</span></p> 
候 语 使 用 --> 
<h2>Movies</h2> 
<div id="movieBox"> 


<h3 id="movie">Inside Out</h3> 
inside the head of a young girl.</p> 


<!-- 包括 一 个 span， 供 随机 问 


<p>An emotional adventur 
<h4>Actors</h4><ul><!-- actors --></ul> 


<h4>Directors</h4><ul><!-- directors --></ul> 
<!-- 添加 一 个 无 序列 表 以 显示 评论 和 评分 --> 


<h4>Comments</h4> 
<ul id="comments"></ul> 


<div Class="o0ntrols"> 
<input type="text"id="txtComment"/><!-- 添加 一 个 文本 框 ， 供 用 户 输入 评论 --> 


<select id="rating"> 
<!-- 评分 选项 --> 
</select> 
<button id="rate">Rate</button> 


</div> 
</div> 


Ff 论 和 评分 ， 并 


请 读者 打开 链接 http://output.jsbin.com/nevaxit， 运 行 该 网 页 ， 添 加 一 些 记 


将 评论 和 评分 添加 到 列表 中 ， 当 然 ， 还 可 以 顺便 看 到 随机 问候 语 。 


18.3.5 用 CSS 设计 样式 

本 书 第 三 部 分 中 的 许多 示例 都 使 用 了 CSS 规则 所 设置 的 颜色 、 字 体 、 边 距 和 边框 等 。 
在 本 书 中 ， 并 没有 直接 讲解 与 CSS 相关 的 内 容 。 如 果 读 者 对 此 感 兴 趣 ， 可 以 自行 阅读 CSS 
规则 ， 这 些 规则 大 多 简单 易 懂 。 学 习 这 些 规 则 时 ， 可 以 每 次 选取 一 个 ， 还 可 以 党 试 更 改 某 些 
直 ， 删 除 一 部 分 或 全 部 规则 。 尽 管 这 些 规 则 可 以 使 页 面 看 上 去 更 美观 ， 但 是 如 果 按 弃 这 些 规 


则 ， 所 有 示例 会 运行 得 更 加 流畅 。 


sw 


18.4 游戏 The Crypt 一 一 玩家 通过 文本 框 发 号 施 令 


在 前 面 章节 中 ， 游 戏 The Crypt 的 玩家 已 经 能 够 在 控制 台 提示 符 下 输入 get、go 和 use 命 
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。 现 在 ， 我 们 的 目标 是 将 用 户 的 输入 从 控制 台 转 移 到 网 页 ， 即 玩家 能 够 在 网 页 的 文本 框 内 


PA 令 ， 如 图 18-6 所 示 。 


Items: 
—- a piece of cheese 


突 交 突 次 次 灾 次 炎 火 灾 灾 火灾 火 实 灾 火 火 火 次 灾 次 实 次 太 次 次 次 炎 次 容 次 太 次 次 奖 大 奕 克 奖 

* Jahver (30) 

实 大 次 次 次 交 次 炎 火灾 灾 类 交火 次 交 火炎 火 次 淆 次 次 次 类 次 次 六 次 次 炊 交 大 次 着 交 大 六 次 诡 
Items : 


- The Sword of Doom 
闫 交 闫 雇 灾 交 内 次 册 内 关内 六 记 册 类 炎 次 闪 六 交 关 详 大 次 交 次 关 次 次 次 大奖 诡 突 庆 大 庆 认 


Exits from The Kitchen: 


*** A zombie sinks its teeth into your neck. *** 


go south Make it so 


图 18-6 玩家 可 以 在 页 面 底部 的 文本 框 中 输入 命令 


为 了 创建 如 上 图 所 示 的 基于 网 页 的 用 户 控 件 ， 我 们 需要 完成 以 下 三 项 任务 : 


(1) 向 页 面 添加 文本 框 和 按钮 。 


(2) 编写 


个 函数 将 文本 框 中 的 文本 转换 为 游戏 命令 。 


(3) 编写 


个 单 击 按钮 时 就 会 调用 的 函数 。 


我 们 本 来 可 以 通过 更 新 控制 器 模块 中 的 代码 来 包括 两 个 新 函数 ， 但 是 控制 器 模块 已 经 成 


熟 稳定 、 运 行 良 好 ， 可 以 启动 游戏 并 使 用 玩家 、 场 所 和 消息 的 模型 和 视图 〈 见 第 16 章 )， 因 


此 不 宜 再 做 更 改 。 较 好 的 办 法 是 添加 一 个 单独 的 模块 ， 专 门 处 理 输入 到 文本 框 中 的 命令 ， 并 


调用 现 有 的 控制 器 来 按 需 执行 get、go 和 use 方法 。 图 18-7 显示 了 The Crypt 中 的 各 个 模 


块 ， 其 中 包括 


新 的 命令 (Commands) 模块 。 


Utility 


Map 


模型 构造 函数 控制 器 


Controller 
Map data place Commands 


rr 添加 代码 将 文本 框 
内 容 转 换 为 命令 


图 18-7 The Crypt 中 的 各 模块 ， 包 括 一 个 通过 文本 框 执 行 命令 的 命令 (Commands) 模块 


下 面 ， 我 们 先 来 完成 以 上 三 项 任务 中 的 第 一 项 : 在 网 页 的 HTML 中 添加 文本 框 和 


按钮 。 
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18.4.1 ”和 癌 页 面 添 加 控件 


首先 ， 我 们 需要 一 种 方法 能 够 让 用 户 输入 并 提交 命令 字符 串 。 以 下 代码 清单 18-7 显示 
了 HTML 如 何 将 文本 框 和 按钮 添加 到 游戏 页 面 中 。 因 为 player、place 和 message 的 div 元 
素 初 始 为 空 ， 所 以 它们 无 法 在 输出 Output 面板 上 显示 出 来 。 


代码 清单 18-7 向 The Crypt 添加 控件 (HTML) 
(http://jsbin.com/rijage/edit?html,output) 


<hl>The Crypt</h1> 

<div id="place"></div> 

<div id="player"></div> 

<div id="messages"></div> 

<div id="controls"> 
<input type="text'" id="txtCommand"> <!-- 添 加 一 个 1qd 为 txtCcommand 的 文本 框 --> 
<button id="btnCommand">Make it so</button><!-- 添 加 一 个 id 为 btnCommand 

的 按钮 --> 
</div> 
<!-- 包 括 所 有 模块 --> 


现在 ， 文 本 框 和 按钮 控件 成 功 地 出 现在 页 面 上 。 因 为 它们 都 拥有 id 属性 ， 因 此 
JavaScript 也 可 以 访问 它们 。 
18.4.2 ”将 文本 框 内 容 映 射 到 游戏 命令 
表 18-1 说 明了 输入 到 文本 框 中 的 命令 如 何 与 第 16 章 中 创建 的 控制 器 模块 中 的 方法 


表 18-1 对 比 文本 框 命令 与 控制 器 模块 中 的 方法 


文本 框 命令 控制 器 模块 中 的 方法 
get game.get() 
go north game.go("north") 
use a rusty key north game.use("a rusty key north") 
从 以 上 表格 对 比 可 见 ， 用 户 使 用 文本 框 发 号 施 令 更 加 方便 快捷 。 ， 我 们 将 介 


如 何 把 用 户 在 文本 框 内 输入 的 内 容 翻译 成 控制 器 能 够 理解 的 命令 。 


18.4.3 ”使 用 split、join、pop 和 shift 发 布 命令 


用 户 将 在 文本 框 中 输入 命令 。 我 们 需要 将 用 户 发 出 的 命令 转换 为 程序 能 够 执行 的 操作 ， 
见 表 18-1。 为 了 让 用 户 在 文本 框 中 输入 的 命令 能 够 调用 正确 的 控制 器 方法 (get、go 或 
use)， 首 先 需要 用 JavaScript 对 象 来 表示 命令 ， 该 对 象 应 该 具有 type 属性 ， 与 需要 调用 的 控 
制 器 方法 匹配 。 表 18-2 显示 了 文本 框 命令 和 该 命令 应 该 生成 的 命令 对 象 。 
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表 18-2 命令 对 象 


type: "get" 


go north { 
type: "go" 
direction: "north" 


type: "use" 
use a rusty key north item: "a rusty key" 
direction: "north" 


} 
在 表 18-2 中 ， 每 个 文本 框 命令 的 第 一 个 单词 提供 了 命令 对 象 的 type。 为 了 获得 文本 框 
中 的 每 一 个 单独 的 单词 ， 需 要 使 用 split 将 字符 串 转 换 为 单词 数组 。 


全 -人 
命令 


var commandWords = commandString.split(™ ") 7 
使 用 以 上 split 方法 ， 字 符 串 "get a rusty key" 将 转换 为 ["get","a","rusty","key"]。shift 数组 
方法 可 以 删除 并 返回 数组 中 的 第 一 个 元 素 ， 这 正 是 我 们 所 需要 的 抓 取 命令 对 象 类 型 type 的 完 


Var commandWords = commandString.split(™" ™); 
var command = { 


type: commandWords.shift(); 
}; 
采用 以 上 shift 数组 方法 ， 文 本 框 中 表示 命令 的 单词 己 经 从 数组 中 删除 了 。["get","a"， 
"rusty", "key"] 变 成 为 ["a","rusty","key"] 
对 于 go 和 use， 我 们 可 以 使 用 pop 数组 方法 来 抓 取 direction， 即 抓 取 commandWords 数 
组 的 最 后 一 个 元 素 : 


command.direction = commandString.pop(); 


如 果 commandWords 数组 中 还 留 有 任何 其 他 元 素 ， 则 将 它们 连接 在 一 起 形成 物品 的 名 


称 : 


command.item = commandWords.join(™ ™); 
例如 ["a","rusty","key"] 连 接 成 "a rusty key" 
代码 清单 18-8 是 基于 上 述 想法 将 命令 字符 串 转换 为 命令 对 象 的 函数 。 


代码 清单 18-8 ”将 命令 字符 串 转换 为 命令 对 象 
(http://jsbin.com/repebe/edit?js,console) 


function parseCommand (commandString) { 


第 18 章 ”控件 : 获取 用 户 输入 
var commandWords = commandString.split(" "); // 将 命令 字符 串 拆 分 为 由 
// 各 个 单词 构成 的 数组 
var command = { / /创建 一 个 对 象 并 将 其 分 配给 commanad 变量 
type: commandWords.shift(); // 删 除数 组 中 的 第 一 个 单词 ， 并 将 其 分 配 


}; 


// 给 type 属性 


Pa 


if (command.type === "go"| |command.type==="use") { // 检 查 其 type 是 go 或 use 


command.direction = commandWords .pop (); 


} 


command.item = commandWords .join(™ "); 


return command; 


}; 


// 删 除数 组 中 的 最 后 一 个 单词 ， 并 
// 将 其 分 配给 direction 属性 


// 将 所 有 剩余 的 单词 连 起 来 形成 
// 物 品 的 名 称 


有 命令 对 象 在 手 ， 我 们 就 可 以 轻松 调用 游戏 控制 器 中 的 相应 方法 。 为 了 有 效 地 组 织 各 种 
命令 类 型 ， 可 以 使 用 switch 结构 ， 在 多 个 选项 之 间 做 出 决定 。 


18.4.4 使 用 switch 在 各 选项 间 做 出 决定 


为 了 让 程序 可 以 根据 用 户 发 出 的 不 同 命令 采取 不 同 的 操作 ， 我 们 可 以 使 用 一 系列 让 
else 结构 ， 也 可 以 使 用 switch 结构 ， 很 多 程序 员 认 为 switch 结构 可 以 让 程序 看 起 来 更 加 整 
洁 。 我 们 可 以 使 用 switch 定义 一 系列 代码 块 ， 并 根据 变量 或 属性 的 值 来 执行 其 中 某 些 代码 
块 。 以 下 示例 中 ， 使 用 command.type 作为 switch 变量 ， 对 switch 结构 和 if-else 结构 进行 


了 简单 比较 : 
switch (command.type) { 
Case "get": 
game .get (); 
break; 
Case "go": 
game .go (command.direction); 
break; 
Case "use": 
game .use (command.item, 


command.direction); 


break; 

default: 
game .renderMessage( 
"I can’t do that"); 


} 
在 以 上 switch 结构 ! 


， 如 果 command.type 的 值 为 “get”， 则 执行 第 一 个 case 块 ! 


if (command.type === "get") { 
game .get (); 

} 

else if (command.type === "go") { 


game .go (command.direction); 
} 
else if (command.type === "use") { 
game .use (command.item, 
command.direction); 
} 
else { 
game.renderMessage ("I can’t do that"); 


的 代 


人 码 。 如 果 command.type 的 值 为 “go” 则 执行 第 二 个 case 块 中 的 代码 。 如 果 没 有 break 语 
句 ，switch 结构 将 在 第 一 个 case 块 匹 配 后 继续 执行 后 续 所 有 的 case 块 。 如 果 command.type 
的 值 与 所 有 条 件 都 不 匹配 ， 则 执行 default 块 中 的 代码 。 


下 


以 上 两 种 方法 其 实 没 有 本 质 区 别 。switch 结构 的 优势 在 于 阅读 体验 更 好 ， 不 足 之 处 是 额 
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外 增加 了 break 语句 。 其 实 ， 对 switch 结构 和 if-else 结构 的 取舍 还 是 取决 于 开发 者 个 人 喜 


好 : 如 果 认 为 switch 结构 更 加 整洁 ， 那 就 使 用 switch， 只 是 不 要 态 记 break 语句 。 
以 下 代码 清单 18-9 显示 了 The Crypt 中 的 switch 结构 ， 该 结构 是 doAction 函数 的 一 部 分 。 


18.4.5 ”执行 命令 


点 


如 果 把 我 们 注音 构建 的 游戏 比 作 UI 拼图 ， 那 么 拼图 所 缺少 的 最 后 一 块 儿 内 容 就 是 将 


JavaScript 链接 到 HITML。 我 们 需要 一 个 按钮 ， 每 当 点 击 该 按钮 ， 就 可 以 调用 代码 清单 18- 


中 的 doAction 函数 : 


Var commandButton = Qocument .9etElementById ("ptnCommand" ) ， 


commandButton.addEventListener ("click", doAction); 


doAction 函数 在 文本 框 中 检索 文本 : 


Var txtCommand = document .getElementById (" 七 XtCommand" ) 7 


Var commandString = txtCommand.value; 


然后 ，doAction 函数 解析 命令 字符 串 以 创建 命令 对 象 ， 在 doAction 函数 中 使 用 了 switch 结 
构 来 调用 匹配 的 控制 器 方法 。 以 下 代码 清单 18-9 显示 了 命令 模块 的 内 部 代码 ， 其 中 用 到 


9 


代码 清单 18-8 中 的 parseCommand 函数 ， 读 者 可 以 在 JS Bin 中 查看 详情 。 请 注意 ，JS Bin 
代码 清单 仅 供 参考 ， 该 模块 无 法 在 JS Bin 上 单独 运行 ， 如 果 运 行 该 代码 ， 会 出 现 报错 提示 


信息 。 


和 代码 清单 18-9 命令 模块 
0 (http://jsbin.com/qedubi/edit?js,console) 


(function () { 
"use strict"™; 
function parseCommand (commandString) { /* 代码 清单 18-8 */ } 
function doAction = () { // 将 文本 框 中 的 文本 分 配给 commandstring 变量 
var txtCommand = document.getELementById ("txtCommand'" ) 


Var commandString = txtCommand.value; 

var _ command = parseCommand (commandString) ;// 解 析 文 本 并 将 创建 的 命令 对 
// 象 分 配给 命令 变量 

theCrypt.messageView.clear() : // 从 消息 视图 中 清除 旧 消 息 

switch (command.type) { 


Case "get": 
game .get (); 
break; 
Case "go": 
game .go (command.direction); 
break; 
Case "use": 
game .use (command.item, command.direction); 
break; 
default: 
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theCrypt.messageView.render ("I don't know how to do that"); 
} 


txtCommand.value = ""; // 清 空 文本 框 并 把 光标 放 在 文本 框 中， 为 下 一 条 命令 做 淮 备 


txtCommand. focus (); 


} 
var commandButton = document .getElementById ("btnCommand"); / /获取 对 页 
// 面 上 按钮 
// 的 引用 
commandButton .adqdEventListener ("click",，doAction) ; // 每 当 单 击 按钮 时 ， 调 用 
//doAction 水 数 


}) 0O); 


我 们 总 是 主动 为 玩家 着 想 ， 体 现在 以 上 代码 中 ， 在 switch 结构 之 后 ， 我 们 将 
txtCommand 的 value 属性 设置 为 空 字符 串 ， 用 于 清空 文本 框 中 用 户 的 命令 ， 其 真正 目的 是 调 
用 文本 框 的 focus 方法 ， 把 光标 放 在 文本 框 中 ， 为 玩家 输入 下 一 条 命令 做 好 准备 。 在 switch 
结构 之 前 ， 我 们 还 使 用 消息 视图 的 clear 方法 来 清除 旧 消息 《〈 详 见 第 17 间 末 尾 )。 

在 以 上 代码 中 ， 将 命令 模块 包 吾 在 立即 调用 函数 表达 式 中 。 一 旦 加 载 网 页 ， 就 会 执行 命 
令 模 块 ， 并 且 在 按钮 元 素 上 添加 事件 监听 器 。 

18.4.6 ”进入 游戏 

我 们 并 没有 更 改 控 制 器 模块 的 现 有 代码 ， 而 是 创建 了 一 个 全 新 的 模块 : Commands 模 
块 。 该 模块 解析 玩家 的 命令 并 调用 控制 器 的 公共 方法 : get、go 和 use。 控 制 器 独立 于 玩家 接 
口 而 存在 ， 无 论 是 基于 网 页 还 是 基于 控制 台 ， 游 戏 的 控制 器 模块 都 不 需要 改变 ， 唯 一 改变 的 
是 控制 器 的 接口 。 

图 18-8 显示 了 正在 运行 的 The Crypt 游戏 ， 可 以 看 到 一 条 显示 给 玩家 的 消息 。 


识 大 识 商 诡 订 磊 亦 交 次 六 大奖 友 交 大 大 大 高 识 识 高 凑 大 亦 商 六 庙 大 庆 诡 交 交 交友 太太 大 交友 


* Jahver (30) 时 
风灾 内 关内 洋洋 突 灾 灾 光 次 容 次 容 容 内容 淆 内 内 次 山内 央 央 次 次 灾 灾 灾 次 突 次 次 容光 类 奖 内 
tchen. There is a disturbing smell. Items: 


- The Sword of Doom 
- a piece of cheese 
-atin of spam 
Exits from The Kitchen: - holy water 
- South 敲 淆 识 识 识 灾 次 详 次 高 识 太 次 交 太太 大 训 衣 训 高 商 训 让 宙 容 次 灾 次 灾 容 次 交 次 交 太 太太 六 六 


Items: 


*** The zombie disintegrates into a puddle of goo. *** 


use holy water south Make it so 


图 18-8 ”正在 运行 的 The Crypt 游戏 向 玩家 显示 一 条 消息 


代码 清单 18-7 已 经 是 游戏 最 新 版 本 的 HIML， 但 是 我 们 还 需要 更 改 消 息 视图 中 的 script 
元 素 并 在 新 的 Commands 模块 中 也 添加 一 个 script 元 素 : 
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<!-- 消息 视图 --> 
<script src="http://output.jsbin.com/nocosej.js"></script> 
<!-- 网 页 控件 --> 
<script src="http://output.jsbin.com/qedubi.js"></script> 


如 果 读 者 想 要 玩 游戏 ， 请 访问 http://output.jsbin.com/depijo; 如 果 读 者 想 要 查看 游戏 的 
HTML 和 JavaScript 代码 ， 请 访问 http://jsbin.com/depijo/edit?html,javascript。 请 务必 小 心 僵尸 ! 


18.5 
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本 章 小 结 


我 们 想 要 使 用 按钮 、 下 拉 列 表 和 文本 框 等 网 页 控件 ， 因 此 首先 需要 用 于 这 些 控 件 的 
HTML 元 素 、 元 素 的 id 属性 以 及 在 JavaScript 中 获取 对 该 元 素 的 引用 ; 然后， 就 可 
以 访问 文本 框 或 下 拉 列 表 的 value 属性 ， 并 指定 一 个 在 单 击 按钮 时 调用 的 函数 。 

使 用 button 元 素 在 页 面 上 显示 按钮 ， 把 按钮 上 显示 的 文本 放 在 开始 标签 和 结束 标签 
之 间 : 


<button>Click Me!</button> 


在 开始 标签 中 包含 id 属性 ， 以 便 从 JavaScript 代码 中 访问 此 按钮 : 


<button id="messageButton">Click Me!</button> 


在 JavaScript 中 使 用 按钮 的 id 获取 对 按钮 的 引用 : 


Var btn = qocument .getElementById("messagdeButton") ， 


定义 一 个 在 单 击 按钮 时 可 以 调用 的 函数 : 


Var ShowMessage = function () { 


Var messageDiv = document .getElementById ("message"); 


messageDiv.innerHTML = "You clicked the button!"; 


}; 
向 按钮 添加 事件 监听 器， 在 单 击 按钮 时 调用 函数 : 


btn.addEventListener ("click", showMessage); 


Ef 


使 用 input 元 素 在 页 面 上 显示 文本 框 ，input 元 素 的 type 属性 设置 为 “text”*”，input 元 素 
没有 结束 标签 : 


<input type="text" id="userMessage" /> 


使 用 文本 框 的 value 属性 ， 获 取 或 设置 文本 框 中 的 文本 : 


Var txtBox = document .getElementById ("userMessage"); 


var message = txtBox.value; 


使 用 带 有 option 元 素 的 select 元 素 ， 显 示 下 拉 列 表 : 


第 18 章 控件 获取 用 户 输 入 


<select> 
<option>Choice 1</option> 


<option>Choice 2</option> 
<option>Choice 3</option> 
</select> 


使 用 switch 结构 ， 根 据 变 量 或 属性 的 值 执行 代码 ; 


Switch (command.type) { 


Case "go": 
// 当 command.type === "go" 时， 执行 代码 
break; 


Case "get": 
// 当 command.type === " 


get" 时 ， 执 行 代码 


break; 
342 


default: 
// 都 不 匹配 时 ， 执 行 代码 
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第 19 草 


本 章 内 容 包括 : 


图 用 一 个 字符 囊 替换 另 一 个 字符 惠 


合板 : 使 用 数据 填充 占 位 符 


图 使 用 while 循环 ， 重 复 执行 代码 
国 使 用 模板 ， 将 HITML 与 JavaScript 分 离 
图 在 网 页 中 谱 入 模板 
图 使 用 map 将 一 个 数组 转换 为 另 一 个 数组 


我 们 希望 自己 设 1i 


每 个 页 面 上 要 包括 的 
中 ， 开 发 团 

本 书 
在 数量 
活 、 更 有 针对 性 。 


直 力 推 使 


小 


在 本 


用 模块 化 方法 


第 


的 网 站 不 仅 浏览 顺畅 ， 而 且 还 能 为 用 户 带 来 乐趣 。 
内 容 、 可 访问 性 、 观 感 以 及 用 户 的 整体 体验 。 在 建 


站 设计 应 该 考虑 
维护 网 站 的 工作 


= 
二 | 


队 的 成 员 各 有 所 长 ， 会 在 不 同 阶段 关注 网 站 的 不 同方 面 。 
开发 程序 。 我 们 可 以 看 到 ， 虽 然 


巴 程 序 拆 分 为 模块 意味 着 


上 有 更 多 的 部 分 需要 管理 ， 但 是 拆 分 之 后 ， 对 每 个 部 分 进行 单 
二 部 分 ， 所 有 程序 都 完全 使 朋 


序 中 日 


= LL 


有 些 视图 将 数据 


岗 了 JavaScript 和 HTML 交织 在 一 起 的 情形 ， 相 应 地 
与 带 有 HTML 的 JavaScript 语言 混合 在 


章 ， 或 最 好 继续 读 下 去 ): 


独 管 一 


会 更 简单 、 更 灵 


Var html = "<h3>" + movie .title + "</h3>"; 


html += 


TS 


+ movie.summary + "</p>"; 


JavaScript 语言 ;在 第 三 部 分 ， 程 
现 了 不 受 欢迎 的 数据 流 交 叉 ， 
起 ， 产 生 其 输出 (请 参阅 第 17 


本 章 介绍 如 何 使 用 模板 把 HTML 从 数据 和 JavaScript 中 拆 分 出 来 。 拆 分 之 后 ， 程 序 开发 


团队 的 设计 归 


HTML 与 JavaScript 等 各 部 分 隔离 j 


交叉 数据 流 ! 


19.1 构建 一 个 新 闻 页 面 一 一 重大 新 闻 


在 第 14 一 16 章 9 


Ph， 我 们 构建 了 一 个 健身 应 月 


记录 他 们 的 锻炼 情况 ， 该 应 


大 众 的 关注 ， 测 试 人 


过 


员 给 出 的 报 


汇 。 现 在 ， 我 们 打算 


趣 的 各 方 人 士 了 解 我 们 正在 j 
图 19-1 是 该 新 闻 页 面 的 截图 ， 页 面 


为 


进行 


用 程序 可 以 在 不 同 设备 和 平 


发 团队 创建 一 个 新 闻 页 面 ， 以 
的 工作 。 


i 就 可 以 专注 于 HIML， 避 开 环 手 的 JavaScript 语法 。 与 模块 化 方法 同 理 ， 将 
下 可 以 提高 代码 的 灵活 性 、 可 交换 性 和 可 维护 性 。 请 不 要 


程序 (Fitness App)， 用 户 可 以 使 用 该 程序 
台 上 应 用 。 现 在 该 应 用 程序 已 经 得 到 


交 媒 体 上 该 应 月 


上 显示 了 两 条 新 闻 。 


程序 已 经 成 为 热点 词 


葬 让 开发 人 员 、 测 试 人 员 和 其 


他 感 兴 


开发 团队 的 所 有 成 员 都 可 以 给 新 闻 


A 


第 19 章 模板 : 使 用 数据 填充 占 位 符 


页 面 投稿 ， 将 投稿 条 目 添加 到 中 央 内 容 管 理 系统 CMS); 负责 管理 CMS 的 工作 人 员 将 上 述 新 
闻 条 目 作 为 JavaScript 数据 提供 给 我 们 ;我 们 负责 将 这 些 数据 转换 为 新 闻 页 面 的 HTML。 


Fitness App News 


Fitness App v1.0 Live! -by Oskar 


Yes, version 1 is here.… 


Posted: October 3rd 2016 
Follow Oskar @appOskar51 


Improved Formatting -by Kallie 


The app's looking better than ever... 
Posted: October 8th, 2016 


Follow Kallie @kalstar 


图 19-1 Fitness App News 上 有 两 条 新 闻 


19.1.1 对 比 新 闻 数 据 和 HTML 
开发 团队 成 员 定期 更 新 内 容 管理 系统 的 新 闻 ， 该 系统 会 为 我 们 提供 以 下 形式 的 数据 : 


var posts = [ 
{ 
title: "Fitness App v1.0 Live!™", 
body: "Yes, version 1 is here..."™, 
posted: "October 3rd, 2016", 
author: "Oskar™., 
social: "@appOskar51" 


title: "Improved Formatting", 

body: "The app's looking better than ever..."™, 
posted: "October 8th, 2016", 

author: "Kallie", 


social: "QkalL5tar" 


] : 
设计 人 员 为 其 中 一 条 新 闻 编写 了 以 下 HTML: 


<div class="newsItem"> 
<h3>Fitness App v1.0 Live!<span> - by Oskar</span></h3> 
<p>Yes, version 1 is here...</p> 
<p class="posted"><em>Posted: October 3rd, 2016</em></p> 
<p class="follow">Follow Oskar @appOskar51</p> 

</div> 
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每 一 则 新 闻 都 包 右 在 一 个 div 元 素 中 ， 由 一 个 标题 和 三 个 段落 组 成 。 标 题 包括 一 个 用 于 
新 闻 作 者 的 span 元 素 〈 我 们 使 用 span 来 为 新 闻 作 者 创建 不 同 于 标题 其 他 部 分 的 格式 )。 下 
面 ， 我 们 将 介绍 如 何 基于 以 上 形式 的 数据 ， 构 造 完 整 的 HIML 新 闻 条 目 。 


19.1.2 ”通过 连接 字符 串 来 构造 HTML 


在 前 面 章节 中 ， 我 们 一 直 在 使 用 字符 串 逐 步 连接 的 方法 来 构造 欲 显示 的 字符 串 。 针 对 一 

条 新 闻 ， 处 理 方法 如 下 所 示 : 

Var item = '<div Class="newsItem"><h3>' + post.title; 

item += '<span> - ' + post.author + '</span></h3>'，; 

item += '<p>' + post.body + '</p>'; 

item += '<p class="posted"><em>Posted: ' + post.posted + '</em></p>'; 

item += '<p class="follow">Follow ' + post.author + ' 1 

item += post.social + '</p></div>'; 


以 上 方法 存在 一 个 很 大 的 缺点 : 将 JavaScript、 数 据 与 HTML 三 者 混在 一 起 。 开 发 团队 
中 有 一 些 非常 出 色 的 设计 师 ， 他 们 精通 HIML， 但 对 JavaScript 却 缺 乏 自 信 ， 虽 然 他 们 很 乐 
意 用 HTML 构建 一 条 新 闻 ， 但 是 所 有 的 var 和 += 还 有 点 符号 让 他 们 感觉 一 头 雾 水 。 即 使 他 们 
会 用 JavaScript， 但 更 新 代码 可 不 像 是 在 公园 里 散步 那么 轻松 ， 他 们 眼中 只 有 引号 中 的 
HTML! 所 以 ， 最 好 还 是 把 HTML 分 离 出 来 ， 让 这 些 专 家 们 心 无 劳作， 专注 于 他 们 最 熟悉 和 
擅长 的 HTML。 


19.1.3 ”使 用 HTML 模板 进行 设计 

我 们 请 设计 师 为 一 个 通用 新 闻 模 板 设计 出 一 套 外 观 优雅 、 结 构 良 好 的 HTML 语句 , 日 
后 我 们 只 需 向 其 填充 最 新 数据 即 可 。 也 就 是 说 ， 请 设计 师 为 我 们 提供 新 闻 条 目的 模板 
(template )， 如 下 所 示 : 


<div class="newsItem"> 
<h3>{{title}}<span> - {{author}}</span></h3> 
<p>{{body}}</p> 
<p class="posted"><em>Posted: {{posted}}</em></p> 
<p class="follow">Follow {{author}} {{social}}</p> 
</div> 


这 样 做 ， 显 然 比 先前 那 种 将 所 有 字符 串 逐 步 连接 起 来 的 方法 更 加 方便 和 简洁 。 单 引号 和 
双 引 号 永远 不 会 混淆 ， 数 据 的 不 同 字段 (标题 、 正 文 、 作 者 、 发 布 时 间 、 社 交 ) 都 清楚 地 标 
识 为 带 有 双 花 括号 的 占 位 符 。 
如 果 以 上 模板 中 只 是 使 用 HTML， 那 么 能 否 在 网 页 上 显示 ? 答案 是 : 不 能 。 我 们 必须 将 
其 包 吐 在 script 标签 中 。 


19.1.4 ”使 用 seript 标签 包 庄 模板 


我 们 使 用 script 标签 将 HTML 模板 包 夺 起 来 ， 然 后 与 网 页 的 HTML 其 他 部 分 一 起 保 
存 。 对 于 script 元 素 ， 要 使 用 非 标准 type 属性 ， 这 样 一 来 ， 当 浏览 器 加 载 该 页 面 时 ， 无 法 识 
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别 该 type， 就 会 忽略 该 模板 。script 元 素 的 内 容 就 不 会 作为 输出 (网 页 的 可 见 〉 部 分 显示 出 
来 ， 也 不 会 作为 JavaScript 参与 程序 的 运行 。 


<script type="text/template" id="newsItemTemplate"> 
<div class="newsItem"> 


<h3>{{title}}<span> - {{author}}</span></h3> 
<p>{{body}}</p> 


<p class="posted"><em>Posted: 


{{posted}}</em></p> 
<p class="follow">Follow {{author}} {{social}}</p> 
</div> 


</script> 


如 果 script 元 素 的 type 属性 为 “text / javascript*， 或 者 type 属性 缺失 ， 则 浏览 器 会 尝试 将 


其 内 容 作 为 JavaScript 代码 参与 程序 的 运行 。 当 type 属性 为 “text/template” 时 ， 浏 览 器 就 会 忽 
咯 其 内 容 。 


虽然 浏览 器 在 呈现 页 面 时 会 忽略 该 模板 ， 但 我 们 依然 可 以 通过 其 id 属性 在 JavaScript 中 
访问 该 模板 : 


Var templateScript = document .get1 
var templateString = 


ElementById ("newsItemTemplate"); 
templateScript.innerHTML; 


以 下 代码 清单 19-1 显示 了 新 闻 页 面 body 元 素 中 的 内 容 : 标题 、 放 置 新 闻 的 div 和 一 个 
包 夺 在 script 标签 中 的 模板 。 


代码 清单 19-1 Fitness App News (HTML) 
(http://jsbin.com/viyuyo/edit?html,output) 


<hl>Fitness App News</n1> 


<div id="news"></news> <!-- 包括 一 个 div 来 放置 新 闻 内 容 --> 
<script type="text/template" id="newsItemTemplate"> <!-- 使 


一 个 script 元 
素来 包 右 新 闻 模板 --> 
<div class="newsItem"> 
<h3>{{title}}<span> - by {{author}}</span></n3> 
<p>{{body}}</p> 
<p class="posted"><em>Posted: 


{{posted}}</em></p> 
<p class="follow">Follow {{author}} {{social}}</p> 
</div> 


</script> 


下 一 步 ， 我 们 只 需 找到 一 种 方法 ， 用 实际 数据 奉 换 以 上 占 位 符 ， 就 可 以 完成 该 新 闻 内 
容 ， 准 备 发 布 了 。 在 下 一 节 中 ， 我 们 将 学 习 如 何 用 一 个 字符 串 准 换 男 一 个 字符 串 ， 用 一 个 占 
位 符 蕉 换 男 一 个 占 位 符 。 


19.2 ”用 一 个 字符 串 蔡 换 另 一 个 字符 串 


用 一 个 字符 串 替换 另 一 个 字符 串 ， 我 们 可 以 使 用 replace 字符 串 方法 ， 向 其 传递 以 下 两 
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个 参数 : 将 欲 找到 并 替换 掉 的 字符 串 作 为 第 一 个 参数 ， 将 替换 后 欲 保留 的 字符 串 作 为 第 二 个 
参数 ， 该 方法 就 会 返回 一 个 新 字符 串 。 以 下 代码 清单 19-2 显示 了 如 何 使 月 
App v1.0 Live!" 蔡 换 字 符 串 "{ ftitle}}"， 在 控制 台 上 生成 以 下 输出 : 


日 字符 串 "Fitness 


><n3>{{title}}</h3> 
><h3>Fitness App v1.0 Live!</n3> 


代码 清单 19-2 ”用 一 个 字符 串 蔡 换 另 一 个 字符 串 
(http://jsbin.com/jeyohu/edit?js,console) 


Var before = "<h3>{{title}}</h3>"; 


Var after = before.replace("{{title}}", "Fitness APP v1.0 Live!"); 


// 碍 找 第 一 个 字符 串 并 将 其 蔡 换 为 第 二 个 字符 串 
console.1log (before); // 原 始 字符 串 并 未 更 改 
console.log (after); 


replace 方法 查找 第 一 个 字符 串 ， 并 返回 一 个 新 的 字符 串 : 


~ 


before.replace (stringl, string2); 


以 上 语句 用 于 在 变量 before 字符 串 中 搜索 第 一 个 字符 串 ， 并 存储 第 二 个 字符 串 
19.2.1 连续 调用 replace 


replace 方法 对 字符 串 进行 处 理 ， 然 后 返回 一 个 字符 串 。 这 意味 着 replace 可 以 在 它 自 己 
的 返回 值 上 继续 调用 ， 即 replace 可 以 调用 自己 的 返回 值 。 连 续 调 用 replace， 如 下 所 示 : 


template 


.replace("{{title}}", "Fitness App v1.0 Live!") 
.replace("{{author}}", "Oskar™); 


假设 template 的 字符 串 是 "<h3>{ {title}}<span> - by {{author}}</span></h3>"， 那 么 上 述 
代码 段 的 运行 可 以 分 解 为 以 下 步 又。 首先 ，{ftitte}} 占 位 符 被 替换 : 


"<n3>{{title}}<span> - by {{author}}</span></h3>" 
.replace("{{title}}", "Fitness APP v1.0 Live!") 
.replace("{{author}}", "Oskar"); 


然后 ，{f{author}} 占 位 符 被 替换 : 


"<h3>Fitness APP v1.0 Live!<span> - by {{author}}</span></h3>" 


.replace("{{author}}", "Oskar"); 


最 终结 果 是 : 


"<h3>Fitness APP v1.0 Live!<span> - by Oskar</span></n3>"; 


代码 清单 19-3 是 连续 两 次 调用 replace 的 示例 ， 在 控制 台 上 输出 如 下 : 


> Follow {{author}} {{social}} 
> Follow Oskar @appOskar51 
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代码 清单 19-3 ”连续 调用 replace 
(http://jsbin.com/rebugu/edit?js,console) 


Var data = { author : "Oskar", social : "QappOskar51" 
Var before = "Follow {{author}} {{social}}"; 
var after = before 
.replace ("{{author}}",data.author) // 在 原始 字符 串 上 调用 replac 
.replace ("{{social}}",data.social); // 对 第 一 次 调用 的 返回 值 再 次 调用 replac 
( 
( 


console.log (before); 


console.log(after); 


在 以 上 代码 清单 19-3 中 ， 将 两 次 调用 replace 的 代码 写成 两 行 的 形式 ， 目 的 在 于 让 代码 
阅读 者 更 容易 辨识 出 每 一 次 调用 ， 对 程序 运行 没有 影响 。 当 一 些 方法 可 以 像 replace 这 样 
用 圆 点 运算 符 再 链接 一 个 方法 ， 我 们 称 这 些 方 法 具有 连贯 接口 。 程 序 员 常 常设 计 出 一 整套 使 
用 连贯 接口 的 对 象 和 方法 ， 使 其 更 容易 使 用 、 阅 读 和 理解 。 


-> 


19.3 ”while 循环 一 一 多 次 替换 字符 串 


在 上 一 节 内 容 中 ， 我 们 已 经 学 会 使 用 replace 将 一 个 字符 串 蔡 换 为 另 一 个 字符 串 ， 因 此 
就 可 以 编写 代码 来 测试 新 闻 网 页 。 图 19-2 是 一 条 新 闻 的 模板 ， 甚 占 位 符 尚 未 替换 。 


Fitness App News 


{{title}} - by {{author}} 
{body}} 
Posted: {{posted}} 

Follow {{author}} {social} 


图 19-2 一 条 新 闻 一 一 显示 所 有 占 位 符 


每 一 条 新 闻 的 数据 就 是 一 个 JavaScript 对 象 ， 具 有 5 个 属性 : tile、body、author、 
posted 和 social: 


var data = { 
title: "Fitness APP v1.0 Livel!", 
body: "Yes, version 1 is here..."v 
posted: "October 3rd, 2016", 
author: "Oskar 
social: "QappOskar51" 

}; 


我 们 可 以 为 每 个 属性 调用 replace。 起 初 ， 感 觉 一 切 进 展 顺 利 。 19-3 显示 了 多 次 调用 
replace 之 后 的 新 闻 内 容 。 
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我 们 距离 普 利 策 新 闻 奖 仅仅 一 步 之 还 了 ! 有 
还 有 一 个 固执 的 {fauthor}} 不 上 表 离 开 。 以 下 代 人 码 清单 19-4 是 实现 图 


方 出 错 了 ? 


Fitness App News 


Fitness App v1.0 Live! -by Oskar 


Yes, version 1 is here... 


Posted: October 3rd, 2016 


Follow {{author}} @appOskar51 


图 19-3 一 条 新 闻 


(http://jsbin.com/quroha/edit?js,html,output) 


到 代码 清单 19-4 ”为 每 个 属性 调用 一 次 replace 


Var data = { 


}; 


VAaAr 


Var 


Var 


Var newsContainer = document .getElementByld ("news"); 


newsContainer.innerHTML = newsltemHTML; 


我 们 终于 发 现 了 问题 ，replace 方法 对 于 它 所 匹配 的 字符 是 


title: "Fitness APP v1.0 Livel!™", 
body: "Yes, version 1 is here..."， 
posted: "October 3rd, 2016", 
author: "Oskar", 

social: "QappOskar51" 


{{author}} 占 位 符 尚 未 符 


揣 (图 的 右 下 角 ) 


个 占 位 符 尚 未 替换 ， 在 这 条 新 闻 的 右 下 角 
19-3 的 代码 。 是 什么 地 


templateScript = document .getElementById ("newsItemTemplate"); 
// 获取 对 包 囊 模板 的 script 元 素 的 引用 


templateString = templateScript.innerHTML; 


newsItemHTML = templateString 
.replace("{{title}}", data.title) 
.replace("{{author}}", data.author) 
.replace("{{posted}}", data.posted) 
.replace("{{body}}", data.body) 


.replace("{{social}}", data.social); 


// 提 取 模 板 的 HTML 


// 使 用 其 属性 值 蔡 换 每 个 占 位 符 


//div 将 月 


// 获 取 对 div 的 引用 ， 


于 保存 这 条 新 闻 


// 将 这 条 新 闻 的 HTML 放 入 div 


蔡 换 第 一 个 ， 而 这 个 新 闻 模 


Be 


口 


入 


板 中 有 两 个 {fauthor}} 占 位 符 ， 现 在 只 蔡 换 掉 其 中 一 个 占 位 符 。 为 了 解决 这 个 问题 ， 需 要 针 
对 同一 个 占 位 符 两 次 调用 replace。 
模板 和 replace 代码 联系 太 紧 密 了 ! 如 果 设 计 人 员 打 算 更 改 模板 ， 包 含 第 三 个 {{author}} 


占 位 符 《〈 可 能 是 为 一 个 电子 邮件 链接 或 简短 的 个 人 介绍 所 准备 )， 就 必须 重 
漳 到 JavaScript， 针 对 replace 再 添加 一 次 调用 。 


汲取 以 上 示例 中 的 教训 ， 我 们 需要 一 种 能 够 在 有 占 位 符 时 反复 自动 调 
码 。 那 么 ， 如 何以 正确 的 次 数 调用 replace 呢 ? 
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更 新 代码 ， 回 


replace 的 代 


19.3.1 在 满足 条 件 时 重复 执行 代码 


新 闻 模 板 中 所 有 占 位 符 都 需要 替换 为 相应 的 数据 。 例 如 ， 两 个 {fauthor}} 都 应 该 用 Oskar 
填充 ， 如 图 19-4 的 右上 和 右 下 所 示 。 


Fitness App v1.0 Live! -byOskar 


Yes, version 1 is here... 


Posted: October 3rd, 2016 
Follow Oskar @appOskar51 


图 19-4 两 个 author 占 位 符 都 替换 为 Oskar( 右 上 和 右 下 ) 


我 们 希望 代码 在 每 一 次 找到 占 位 符 时 ， 都 会 调用 replace。 伪 代码 如 下 所 示 : 


while there is a placeholder { 
replace the placeholder with data 


} 
我 们 的 目标 是 ， 发 现 占 位 符 时 ， 花 括号 之 间 的 代码 块 就 要 反复 执行 。 如 果 找 不 到 占 位 
符 ， 可 以 跳 过 该 代码 块 。 使 用 JavaScript 可 以 实现 上 述 目 标 ， 如 下 所 示 : 


while (filled.indexOf (placeholder) !== -1) { 
filled = filled.replace (placeholder, data.property); 


} 


对 于 以 上 代码 ， 相 信 读 者 能 够 大 致 明白 其 功用 ， 即 使 目前 看 不 懂 细 节 ， 也 不 必 担 心 。 下 
面 ， 我 们 介绍 while 循环 。 


19.3.2 ”while 循环 


在 以 上 filled 字符 串 中 找到 占 位 符 时 ，while 循环 重复 调用 replace; 在 filled 字符 串 中 找 
不 到 占 位 符 时 ， 程 序 跳 过 该 代码 块 ， 继 续 执 行 。 通 常 ， 当 某 一 条 件 为 true 时 ，while 循环 就 
会 重复 执行 一 段 代 码 ， 如 下 所 示 : 


while (condition) { 


// 如 果 条 件 为 真 ， 则 执行 代码 。 


} 


while 循环 首先 对 条 件 进行 评估 。 如 果 条 件 结果 为 tue， 则 执行 代码 块 ， 这 一 点 和 让 语句 一 
样 。while 循环 与 if 语句 的 不 同 之 处 在 于 ， 执 行 代码 块 后 ，while 循环 会 再 次 评估 条 件 。 如 果 条 
件 结果 仍然 为 tue， 则 再 次 执行 该 代码 块 。 也 就 是 说 ， 当 条 件 为 tue 时 ，while 循环 会 持续 不 断 
地 执行 该 代码 块 ， 如 果 条 件 为 外 lse， 则 跳 过 该 代码 块 ， 程 序 继续 执行 该 代码 块 之 后 的 语句 。 

以 下 代码 清单 19-5 是 一 个 while 循环 ， 用 于 显示 从 1 到 10 的 整数 。 
代码 清单 19-5 ”使 用 while 循环 进行 计数 
[0® (http://jsbin.com/quroga/edit?js,console) 


Var count = 1; 
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while (count < 11) { 


console.log (count 


~ 


Count++; // 使 用 增 量 运算 符 ++， 将 count 的 值 加 1 


} 


在 以 上 代码 中 ， 一 旦 count 变量 达到 11， 条 件 值 就 变 成 为 false， 因 此 不 会 将 count 的 
直 记 录 到 控制 台 。 代 码 块 条 件 中 所 使 用 变量 的 值 应 该 不 断 变化 ， 否 则 ， 如 果 条 件 的 值 刚 开 
始 为 tue， 就 永远 不 会 变 成 false， 该 循环 就 会 成 为 一 个 无 限 循环 。 在 代码 清单 19-5 中 ， 使 
用 了 增 量 运算 符 ++， 为 count 的 值 加 1。 在 JavaScript 中 ， 有 三 种 方法 可 以 实现 上 述 功能 ， 
如 下 所 示 : 


count = count + 1; 


count += 工 


COUn 七 十 十 7 


19.3.3 ”替换 一 个 可 以 找到 的 字符 串 

当 一 个 占 位 符 多 次 出 现时 ， 可 以 使 用 while 循环 进行 多 次 替换 。 首 先 ， 需 要 检查 我 们 想 要 
蔡 换 掉 的 占 位 符 是 否 与 indexOf 方法 同时 存在 。 如 果 找 不 到 占 位 符 字 符 串 ，indexOf 返回 -1; 
如 果 能 够 找到 该 占 位 符 ， 那 么 indexOf 不 会 返回 -1。while 循环 的 结构 如 下 所 示 : 


while (filled.indexOf (placeholder) !== -1) { 
// 更 改 filled 


} 


在 以 下 代码 清单 19-6 中 ， 使 用 while 循环 多 次 蔡 换 一 个 字符 串 ， 直 到 再 也 找 不 到 该 字 
符 串 ， 在 控制 台 上 生成 以 下 输出 : 


> Starting replacement... 
> {{title}} by Oskar. Follow {{author}} {{social}} 
> {{title}} by Oskar. Follow Oskar {{social}} 
> ...replacement finished. 
代码 清单 19-6 ”使 用 一 个 带 有 replace 的 while 循环 
加 (http://jsbin.com/cabaju/edit?js,console) 


Var template = "{{title}} by {{author}}. Follow {{author}} {{social}}"; 
var filled = template; // 使 用 了 一 个 新 变量 ， 以 保证 初始 的 template 不 会 改变 
console.log("Starting replacement..."); 

while (filled.indexOof ("{{author}}") !== -1) { // 检 查 是 否 可 以 找到 占 位 符 


filled = filled.replace("{{author}}"，"Oskar");  // 用 一 个 值 替 换 占 位 符 
console.1log (filled); 


} 


console.1log("...replacement finished."); 


以 上 代码 首先 将 “Starting replacement...”(“ 正 在 开始 蔡 换 …… ”) 显示 在 控制 台 上 ; ” 然 
后 ，while 循环 两 次 执行 其 代码 块 ， 先 替换 第 一 次 出 现 的 {fauthor}}， 再 蔡 换 第 二 次 出 现 的 
{{author}}。 因 为 没 能 找到 更 多 的 {{author}}， 所 以 filled.indexOf (“ff{author}}”) 返回 值 为 -1， 
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while 循环 结束 。 程 序 继续 执行 后 续 代 人 码 ， 将 "...replacement finished." (“...... 蔡 换 已 完成 ”) 
显示 在 控制 台 上 。 
19.3.4 ”使 用 正则 表达 式 符 换 字符 串 

除了 使 用 以 上 while 循环 的 方法 ，JavaScript 还 有 另外 一 种 替代 字符 串 的 方法 : 使 用 正则 
表达 式 (regular expressions) 。 该 方法 使 用 一 种 高 效 但 比较 复杂 的 方式 来 指定 替换 和 匹配 的 
字符 。 正 则 表达 式 超 出 了 本 书 的 范围 ， 如 果 读 者 感 兴趣 ， 可 以 在 本 书 的 在 线 网 站 查询 相关 示 


例 : wwwroom51.co.uk/js/regexp.html。 


19.4 自动 蔡 换 模板 中 的 占 位 符 


在 以 上 健身 应 用 程序 中 ， 显 示 的 是 用 户 的 锻炼 记录 ， 其 新 闻 网 页 显示 的 是 一 则 新 闻 内 
容 。 在 以 上 测验 应 用 程序 中 ， 显 示 的 是 一 组 组 问题 和 备 选 答案 。 在 游戏 The Crypt 中 ， 显 示 
的 是 地 图 。 针 对 以 上 三 个 应 用 程序 ， 如 果 能 够 使 用 HTML 模板 来 显示 以 上 内 容 ， 那 就 非常 
理想 了 。 但 是 ， 我 们 并 不 想 在 每 次 使 用 数据 填充 占 位 符 时 都 重新 创建 一 个 while 循环 。 是 否 
能 够 让 程序 自动 使 用 模板 ? 


19.4.1 将 模 极 占 位 符 与 对 象 属性 相 匹 配 
19-5 再 次 显示 了 一 条 来 自 健身 应 用 程序 新 闻 页 面 的 新 闻 ， 尚 未 用 数据 填充 占 位 符 。 


Fitness App News 


{{title}} - by {{author}} 


{body}} 


Posted: {{posted}} 
Follow {{author}} {{sociaD)} 


图 19-5 一 条 尚未 填充 占 位 符 的 新 闻 
将 要 填充 占 位 符 的 数据 如 下 所 示 : 


var data = { 
title: "Fitness APP v1.0 Livel!", 


body: "Yes, version 1 is here..."™, 
posted: "October 3rd, 2016", 
author: "Oskar"™, 
social: "QappOskar51" 
}; 
我 们 注意 到 ， 以 上 新 闻 中 数据 对 象 的 属性 名 称 〔 即 “ 键 ”) 与 模板 中 占 位 符 的 名 称 相 匹 
配 。 针 对 每 个 “ 键 ”， 我 们 希望 在 程序 每 一 次 找到 与 其 匹配 的 占 位 符 时 ， 都 会 使 用 该 “ 键 ” 
来 蔡 换 这 个 与 其 匹配 的 占 位 符 。 具 体 步骤 如 下 : 
(1) 针对 第 一 个 “ 键 ”tile， 反 复 使 用 “Fitness App v1.0 Live!” 和 替换 {ftitle}}， 直 到 没 
有 其 他 {fftitle}} 占 位 符 可 以 替换 。 
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(2) 针对 第 二 个 “ 键 ” body， 反 复 使 用 “Yes, version 1 is here...” 和 替换 {{body}}， 直 到 不 

再 有 需要 替换 的 {{body}} 占 位 符 。 
(3) 针对 每 个 “ 键 ” 都 重复 上 述 过 程 ， 直 到 所 有 “ 键 ” 替 换 掉 其 匹配 的 所 有 占 位 符 。 
我 们 可 以 使 用 Object.keys 方法 来 获取 一 个 包含 新 闻 内 容 属性 名 称 的 数组 。 


Var keys = Object.keys (data); 


以 上 述 新 闻 为 例 ，keys = ["title","body","posted","author","social"]。 

通过 使 用 “ 键 ?” 我 们 可 以 轻 轻松 松 地 创建 很 多 占 位 符 。 别 筷 了 ， 我 们 可 以 使 用 方 括号 

运算 符 来 检 索 “ 键 ”的 值 : 
data[l"title"]; // "Fitness App v1.0 Live!" 
data["author"]; // "Oskar" 


我 们 还 可 以 使 用 一 个 属性 的 “ 键 ” 来 构建 模板 


UD 


需要 匹配 的 占 位 符 : 


Var placeholder = "{{" + key + "™}}"; 


既然 我 们 要 使 用 “ 键 ” 来 解锁 属性 和 占 位 符 ， 对 “ 键 ” 的 命名 要 尽量 合理 易 懂 ( 表 19-1)。 


Wh 


表 19-1 通过 属性 的 键 来 访问 属性 的 值 并 构建 相应 的 占 位 符 


键 值 占 位 符 
title data["title"] {{title}} 
body data["body"] {{bady}} 

posted data["posted"] {{posted}} 


19.4.2 为 每 个 “ 键 ” 填 充 所 有 的 占 位 符 
下 面 ， 我 们 把 上 述 内 容 整 合 在 一 起 进行 编程 。 这 些 代码 不 仅 能 为 健身 应 用 程序 和 新 闻 页 


面 模板 填充 数据 ， 而 且 还 能 处 理 所 有 数据 和 模板 的 匹配 问题 。 代 码 清单 19-7 显示 了 一 个 Fill 
函数 ， 该 函数 基于 前 几 节 的 想法 ， 遍 历 一 个 数据 对 象 的 所 有 “ 键 ” 并 用 它们 的 “ 值 ” 蔡 换 与 
其 匹配 的 占 位 符 。 

代码 清单 19-7 一 个 用 数据 填充 模板 的 函数 
(http://jsbin.com/bazika/edit?js,output) 


function fill (template, data) { 
Object .keys (data) .forEach (function (key) { // 遍 历数 据 中 的 每 个 “ 键 ” 

var placeholder = "{{" + key + "}}";  // 使 用 “ 键 ” 构 建 占 位 符 并 检 

// 索 数据 什 


var value = data[key]: 
while (template .indexOf (Placeholder) !==-1) {// 一 直 使 用 “ 值 ” 替 换 占 位 符 


// 直 到 再 也 找 不 到 该 占 位 符 
template = template .epPLace (placeholder, value); 
} 
}); 
return template; // 返 回 已 经 被 填充 好 的 模板 


314 


第 19 章 模板 : 使 用 数据 填充 占 位 符 


} 
// 测试 fil1l 函数 
var data = { 


title: "Fitness APP v1.0 Livel!", 
body: "Yes, version 1 is here..."™, 
posted: "October 3rd, 2016", 
author: "Oskar", 
social: "QappOskar51" 
}; 
Var templateScript = document.getElementById ("newsItemTemplate"); 
// 在 网 页 上 收集 对 模板 和 新 闻 
// 容 器 的 引用 


Var templateString = templateScript.innerHTML; 


Var newsContainer = document .getElementByld ("news"); 
newsContainer .innerHTML = fill (templateString,data); // 使 用 数据 填充 模板 并 更 
// 新 新 闻 显示 
在 以 上 代码 的 最 后 一 行 ， 对 fl 函数 进行 了 测试 ， 用 函数 返回 的 HTML 设置 了 div 元素 
的 内 容 。 


19.4.3 ”使 用 模板 构建 多 条 新 闻 的 列表 


我 们 的 工作 初 见 成 效 。 在 健身 应 用 程序 的 新 闻 页 面 上 已 经 列 出 了 一 条 条 新 闻 。 不 足 之 处 
在 于 模板 中 的 fl 函数 只 能 处 理 一 条 新 闻 。 不 过 ， 也 不 必 难 过 ， 我 们 知道 forEach 方法 可 以 
处 理 列表 。 因 此 ， 只 要 编写 一 个 flList 函数 就 能 轻松 解决 上 述 问 题 ， 如 下 所 示 。 


代码 清单 19-8 ”使 用 一 个 模板 来 构建 列表 
Wy (http://jsbin.com/hilecu/edit?js,output) 


> 
二 一 | 


function fill (template，dqata) { /* 代码 清单 19-7 */ } 
function fillList (template, dataArray) { 
var listString = ""; 
dataArray .forEach (function (data) {// 针 对 每 条 新 闻 都 调用 fi11 函数 ， 构 建 列 
// 表 字符 串 
listString += fill (template, data); 
}); 


return listString; 


} 
// 测试 该 函数 
Var posts = [ 


{ 
title: "Fitness APP v1.0 Live!™", 
body: "Yes, version 1 is here..."， 
posted: "October 3rd, 2016", 
author: "Oskar"™, 


social: "@appOskar51" 
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{ 
title: " 
body; “TT 
posted: 
author: 
social: 
} 
/* 在 JS Bin 
]; 


Improved Formatting", 

he app's looking better than ever...", 
"October 8tnhn, 2016", 

"Kallie", 

"@kal5tar" 


上 还 有 另外 两 条 新 闻 */ 


Var templateScript = Qqocument .getElementById ("newsItemTemplate"); 


Var templateString = templateScript.innerHTML; 


Var newsContainer = document.getElementByld ("news"); 


newsContainer.innerHTML = fillList(templateString, posts); 


/ /为 每 条 新 闻 项 填写 模板 ， 并 
// 使 用 已 完成 的 HTML 字符 串 
// 更 新 显示 


在 以 上 代码 的 fllList 函数 中 ， 使 用 了 forEach 方法 来 遍历 数据 对 象 数 组 dataArray， 将 每 


个 数据 对 象 传递 给 fill 函数 


， 并 将 填充 好 的 模板 返回 到 listString。 


掌握 了 以 上 两 个 模板 函数 ， 现 在 我 们 热切 希望 得 到 健身 应 用 程序 新 闻 的 独家 报道 权 。 


19.5 创建 一 个 新 闻 页 面 一 一 处 理 最 新 消息 


下 面 ， 我 们 对 代码 进行 模块 化 处 理 。 开 发 团队 的 成 员 之 间 喜 欢 分 享 代码 ， 同 时 他 们 讨厌 
全 局 污染 。 因 此 ， 他 们 希望 看 到 一 个 完整 的 新 闻 页 面 程序 ， 由 独立 数据 和 模板 模块 两 部 分 构 


成 ， 如 图 19-6 所 示 。 


模块 新 闻 页 面 


Page HTML 
News Items 


News Item Template 


Template Functions 
Page JavaSscript 


图 19-6 〈 左 图 ) 该 页 面包 括 两 个 模块 ， 新 闻 内 容 模板 和 JavaScript 代码 ; 


〈 右 图 


) 该 页 面 导 入 这 两 个 模块 


JS Bin 上 的 新 闻 页 国 


包括 一 个 包 右 在 script 元 素 内 的 新 闻 内 容 模板 和 JavaScript 面板 


上 的 代码 ，JavaScript 面板 
该 网 页 上 有 两 条 新 闻 。 


使 用 模块 和 模板 来 显示 新 闻 内 容 。 图 19-1 显示 了 已 完成 的 网 页 ， 


要 完成 上 述 工作 ， 首 多 


下 两 小 节 内 容 。 


E 需 要 创建 模块 ， 然 后 将 模块 导入 到 网 页 中 。 欲 知 详情 ， 请 阅读 以 


19.5.1 创建 模板 模块 和 数据 模块 
我 们 需要 将 模板 函数 放 入 一 个 模块 中 ， 将 新 闻 数 据 放 入 男 一 个 模块 中 。 使 用 命名 空间 可 
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o 
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以 下 代码 清单 19-9 显示 了 如 何 将 代码 清单 19-7 和 19-8 中 的 两 个 模板 函数 打包 到 一 个 


模板 模块 中 。 


(function () { 
"use strict"™; 


furnietion .£1iLL 


function fillList 


代码 清单 19-9 ”模板 模块 
(http:/jsbin.com/pugase/edit2js,console) 


(template, data) { /* 参见 代码 清单 19-7 */ } 


(template，dataArray) { /* 参 见 代 码 清 单 19-8 */ } 


if (window.gpwj === undefined) { / /确保 gpwj 在 全 局 命名 空间 中 
window.gpwj] = {}; 


} 


gpwj .templates = { 
于 于 下 正二 > 
fillList: fillList 


}) 0); 


// 将 两 个 模板 函数 添加 到 gpwj .templates 


以 上 代码 中 使 用 了 一 个 新 的 命名 空间 一 一 gpwj 〈 来 自 本 书 )。 因 为 该 模板 模块 不 仅 会 应 


月 


HHN 


Var newsltemHTML = 


2. 新 闻 数 据 


在 本 书 的 几 个 程序 中 ， 而 且 将 在 许多 项 目 ， 
E 间 。 需 要 调用 这 些 函数 时 ， 请 同时 包括 该 命名 空间 


得 以 使 用 ， 因 此 非常 有 必要 将 其 放 入 通用 命名 


gpwj .templates.fill (newsItemTemplate, data); 


在 现实 生活 中 ， 新 闻 页 面 的 新 闻 数 据 来 自 一 个 中 央 内 容 管理 系统 “CMS)。 现 在 ， 我们 
通过 创建 一 个 提供 虚拟 数据 的 模块 来 模拟 CMS 新 闻 源 ， 以 后 再 将 该 模块 替换 为 与 实时 CMS 


连接 的 模块 。 


以 下 代码 清单 19-10 包 扣 


命名 空间 。 


(function () { 
"Use steriet "sy 
Var posts = [ 


{ 


六 包 春 一个 


5 数据 和 一 个 获取 数据 的 函数 ， 该 函数 被 分 配给 fitnessApp.news 


代码 清单 19-10 ”新 闻 页 面 的 数据 模块 
(http://jsbin.com/fupiki/edit?js,console) 


多 条 新 闻 构 成 的 数组 ， 而 不 是 从 CMS 获取 数据 


title: "Fitness APP v1.0 Live!", 


body: "Yes, version 1 is here..."/ 
posted: "October 3rd, 2016", 
author: "Oskar"™, 

social: "@appOskar51" 
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/* 在 JS Bin 中 有 更 多 的 数据 */ 
] 7 
function getNews (numItems) { 
return posts.slice(0, numItems); 


} 


// 返 


回 指 定数 目的 新 闻 内 容 


if (window.fitnessApp === undefined) {// 确 保 fitnessApp 全 局 命名 空间 存在 


window.fitnessApp = {}; 
} 
fitnessApp.news = { 


getItems: 


getNews 


}) (0); 


要 获取 一 定数 量 的 新 闻 ， 必 须 指定 所 需 的 条 目 数 来 调 


闻 ， 就 使 用 以 下 代码 : 


// 将 news 命名 空间 添加 到 fitnessApp 命名 空间 


j getItems。 例 如 ， 要 获取 三 条 新 


Var itemsData = fitnessApp.news.getItems (3); 


如 果 要 从 CMS 中 检索 一 定数 量 的 真实 新 闻 数 据 ， 采 用 的 代码 模块 接口 与 代码 清 
中 的 接口 相同 ， 换 名 话说 ， 要 从 CMS 获取 消 , 


息 也 需要 调用 getItems 方法 


。 正 是 因为 使 用 ] 


相同 的 接口 ， 我 们 日 后 才 可 以 轻松 地 将 模块 从 现在 的 静态 版 本 切换 到 CMS 动态 版 本 。 
19.5.2” 导 人 模块 


为 了 向 读者 提供 有 关 健身 应 用 团队 开发 的 最 新 要 闻 ， 我 们 需要 创建 一 个 简单 的 新 闻 页 


面 ，HTML 版 本 如 下 所 示 。 


站 
<hl>Fitness App News</h1> 


<div id="news"></news> 


代码 清单 19-11 模块 化 的 新 闻 页 面 (HTML) 
(http://jsbin.com/vemufa/edit?html,output) 


<!-- 包 括 新 闻 内 容 的 div --> 


<script type="text/template" id="newsItemTemplate"> <!-- 将 HTML 模板 包 于 


在 该 页 面 的 script 标签 内 --> 


<div class="newsItem"> 


<h3>{{title}}<span> - by 


<p>{{body}}</p> 


<p class="posted"><em>Posted: 


{author}}</span></h3> 


<p class="follow">Follow 


</div> 
</script> 


{{posted}}</em></p> 
{author}} {{social}}</p> 


<!-- 模板 模块 --> <!-- 导 入 模板 模块 和 数据 模块 --> 


<script src="http://output.jsbin.com/pugase.js"></script> 


<!-- 新 闻 数 据 --> 


<script src="http://output.jsbin.com/fupiki.js"></script> 


为 了 将 该 程序 的 所 有 部 分 整合 在 一 起 ， 我 们 添加 了 JavaScript， 如 以 下 代码 清单 19-12 所 


示 ， 先 从 页 面 检索 到 模板 ， 
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新 闻 数 据 填充 该 模板 ， 最 后 使 用 生成 的 HTML 更 新 新 闻 div。 


第 19 章 模板: 使 用 数据 填充 占 位 符 


代码 清单 19-12 ”模块 化 的 新 闻 页 面 
(http://jsbin.com/vemufa/edit?js,output) 


Var templateScript = document .getElementById ("newsItemTemplate"); 
// 从 页 面 中 获取 需要 的 部 分 
Var templateString = templateScript.innerHTML; 


pa 


Var newsContainer = document .getElementByld ("news"); 
var newsData = fitnessApp.news.getItems (3); // 使 用 新 闻 数 据 模 块 检索 三 条 新 闻 
newsContainer.innerHTML=gpwj .templates.fillList (templateString, newsData); 

// 使 用 模板 模块 生成 新 闻 内 容 HTML， 并 更 新 页 面 


使 用 模板 是 一 种 从 数据 生成 HTML 的 常见 方式 。 现 在 ， 我 们 可 以 从 许多 JavaScript 模板 
库 中 免费 得 到 模板 ， 其 中 最 流行 的 三 个 免费 模板 库 分 别 是 Handlebars、Mustache 和 Pug。 

以 下 为 刚刚 收 到 的 重要 新 闻 : 因为 我 们 整洁 、 模 块 化 、 可 重用 的 编程 风格 深 得 开发 团队 队 
友 们 喜爱 ， 他 们 斩 言 每 天 都 会 添加 新 的 新 闻 内 容 。 而 且 有 些 人 已 经 把 我 们 的 gpwj.templates 函数 
合并 到 他 们 自己 的 应 用 程序 中 了 。 我 们 也 打算 如 法 炮制 ， 造 福 我 们 自己 的 游戏 The Crypt。 


19.6 ”游戏 The Crypt 一 一 改善 视图 


在 第 17 章 中 ， 我 们 为 玩家 和 场所 创建 了 一 些 基于 网 络 的 视图 。 这 些 视图 显示 的 信息 起 
初 只 是 适用 于 在 控制 台 上 显示 ， 因 此 使 用 了 spacer 命名 空间 的 空格 、 换 行 符 、 方 框 和 边框 进 
行 格式 处 理 ， 而 没有 使 用 HTML 格式 。 在 本 章 中 ， 我 们 已 经 学 会 如 何 使 用 模板 分 隔 标记 和 
JavaScript 语句 。 下 面 用 模板 知识 改进 该 游戏 的 视图 ， 即 使 用 适当 的 HTML 标签 包 右 The 
Crypt 游戏 中 的 数据 。 

19-7 显示 了 改进 之 后 的 游戏 外 观 。 从 纯 文本 切换 到 HTML 之 后 ， 我 们 就 可 以 使 用 
CSS 对 输出 进行 样式 处 理 ， 因 此 视觉 效果 设计 将 大 有 作为 。 图 19-8 显示 了 该 项 目 包 含 的 各 
个 模块 ， 突 出 显示 新 模块 〈Utility) 和 更 新 模块 (Views)。 


2 


*** A Zombie sinks its teeth into your neck. *** 


use holy water south| 。 Pe 


图 19-7 在 游戏 The Crypt 的 最 新 版 本 中 使 用 HTML 模板 构建 页 面 元 素 
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Utility 
Views 
Templates Model Constructors Controller 
playerView 
Map Player Controller 
placeView 
Map data Place Commands 
messageView 


Map builder 


图 19-8 ”游戏 The Crypt 中 的 各 个 模块 ， 突 出 显示 新 模块 和 更 新 模块 
在 19.5.1 节 中 ， 我 们 已 经 创建 了 模板 模块 。 下 面 ， 我 们 将 创建 更 多 的 模板 并 用 它们 更 新 
视图 。 
19.6.1 为 所 有 视图 创建 HTML 模板 
以 下 代码 清单 显示 ， 游 戏 中 所 有 模板 都 包 庄 在 HTML script 标签 内 ， 这 些 模板 是 JS Bin 
完整 网 页 的 组 成 部 分 。 


代码 清单 19-13” 带 模板 的 The Crypt (HTML) 


0 (http://jsbin.com/yapiyic/edit?html,output) 


[sa 


<script type="text/template" id="itemTemplate"> <!-- 使 用 script 标签 包 庄 页 二 
的 HTML 模板 --> 
<1i1>{f{fitem}}</ IIL> 
</script> 
<script type="text/template" id="playerTemplate"> <!-- 给 script 标签 一 个 非 标 
准 类 型 属性 ， 因 此 该 标签 不 被 执行 --> 


Ba 


» 


<h3>{{name}}</h3> 
<p>{{healthn}}</p> 
<ol id="playerIitems"></o1> 
</script> 
<script type="text/template" id="placeTemplate"> <!-- 包含 id 属性 ， 以 便 从 
JavaScript 中 访问 script 元 素 --> 


<n3>{{title}}</nhn3> 
<p>{{description}}</p> 
<div class="placePanel"> 
<h4>Items:</h4> 
<ol idq="placeItems"></ol> <!-- 在 模板 中 包含 一 个 有 序列 表 元 素 作为 列表 
项 的 容器 --> 


</div> 
<div class="placePanel"> 
<h4>Exits:</h4> 
<ol id="placeExits"></01> <!-- 向 列表 容器 提供 1dq， 以 便 JavaScript 
代码 添加 列表 项 --> 


</div> 
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</script> 


<script type="text/template" id="messageTemplate"> 


<p>*** {{message}} ***</p> 


</script> 


以 上 模板 中 并 没有 混入 JavaScript 代码 ， 因 此 网 页 设计 师 可 以 使 用 他 们 熟悉 的 HTML 知 


识 更 新 模板 。 
且 更 易于 分 享 。 


于 阅读 ， 并 


显然 ， 以 上 这 种 针对 不 同 的 关注 点 分 离 不 同 模块 的 做 法 ， 使 模板 更 整洁 ， 更 易 


19.6.2 ”针对 新 模板 更 新 视图 
由 于 游戏 The Crypt 中 的 模板 字符 串 已 经 舱 到 页 面 上 的 HIML 中 ， 因 此 我 们 需要 更 新 视 


图 模块 来 抓 取 这 些 模板 字符 串 ， 然 后 使 用 消息 、 玩 家 和 场所 模型 中 的 数据 对 这 些 模 板 字符 串 


进行 填充 。 代 码 清 单 19-14、 19-15 和 19-16 显示 了 新 的 视图 代码 (请 注意 ， 设 计 视 图 的 目 
的 是 供 控制 器 使 用 ， 视 图 本 身 并 不 能 单独 运行 )。 以 上 代码 的 JS Bin 链接 虽然 不 能 运行 代 
码 ， 但 是 可 供 我 们 复制 、 克 隆 或 更 改 〈 我 们 选择 的 ) 代码 。 


1. 消息 


在 该 游戏 的 三 种 视图 中 ， 消 息 视 图 最 简单 。 下 面 ， 我 们 就 首先 更 新 消息 视图 。 


代码 清单 19-14 ”使 用 模板 的 消息 视图 
(http://jsbin.com/jojeyo/edit?js,console) 


(function () { 


}) 


"use strict"; 

var messageDiv = document.getElementById ("messages"); // 收 集 对 网 页 上 
/ /元素 的 引用 

Var templateScript = document.getElementById ("messageTemplate"); 


Var template = templateScript.innerHTML; 
function render (message) { // 定 义 一 个 函数 以 填充 消息 模板 并 更 新 显示 
var data = { message: message }; 


messageDiv.innerHTML = gpwj.templates.fill (template, data); 
} 


function clear () { // 定 义 一 个 函数 清空 消息 div， 清 除 显 示 
messageDiv.innerHTML = "";} 

} 

if (window.theCrypt === undefined) { 


window.theCrypt = {}; 
} 
theCrypt.messageView = { // 将 这 两 个 函数 添加 到 messageView 命名 空间 


render: render, 


clear: clear 


() 7 


在 以 上 消息 视图 中 ， 传 递 给 render 方法 的 消息 只 是 字符 串 ， et ca 
对 象 该 方法 使 用 对 象 的 “ 键 ” 创 建 占 位 符 和 查找 “ 值 ”)， 因 此 render 会 从 消息 中 创建 一 


321 


361 


362 


363 


JavaScript 开发 实战 


对 象 data 作为 参数 ， 消 息 "hello" 变 成 {message: "hello"}， 然 后 ，fill 方法 将 使 用 “ 值 ” 
"hello" 替 换 {{message}} 占 位 符 。 
2. 玩家 


办 为 每 个 玩家 都 拥有 多 个 物品 ， 所 以 玩家 视图 比 消息 视图 稍微 复杂 。 除 了 有 一 个 模板 字 


符 串 显 示 玩 家 的 名 字 和 健康 值 ， 玩 家 视图 还 需要 男 一 个 字符 串 来 显示 物品 。 
下 一 个 代码 清单 显示 新 的 玩家 视图 ， 与 物品 相关 的 代码 以 粗 体 显示 。 
代码 清单 19-15 ”使 用 模板 的 玩家 视图 


(http://jsbin.com/suyona/edit?js,console) 


ur 


0% 


(fu 


nction () { 


"use strict"; 


var 


playerDiv = document .getElementByIlId ("player"); 
playerScript = document.getElementBylId ("playerTemplate"); 
itemScript = document .getElementById("itemTemplate"); 
playerTemplate = playerScript.innerHTML; 


itemTemplate = itemScript.innerHTML; 


function render (player) { 


Var data = player.getData(); 

Var itemsDiv; 

var items = data.items .map (function (itemName){ // 使 用 map 从 物品 名 称 
/ /字符 串 数组 创建 物品 
/ /对象 数 组 


return { item : itemName }; 

}); 
playerDiv.innerHTML = gpwj.templates.fill (playerTemplate, data); 
// 将 从 玩家 模板 生成 的 HTML 添加 到 页 面 
itemsDiv = document.getElementById ("playerIitems"); //playerIitems div 
// 刚 刚 添 加 到 页 面 ， 获 
// 取 对 它 的 引用 
itemsDiv.innerHTML = gpwj.templates.fillList(itemTemplate, items); 
// 将 物品 的 HTML 添加 到 playerItems div 


} 
if (window.theCrypt === undefined) 1{ 
window.theCrypt = {}; 


} 
theCrypt.playerView = { 


render: render 


}) () 7 


在 以 上 代码 中 ， 玩 家 的 物品 数据 是 一 个 字符 串 数组 。 因 为 flIList 需要 一 个 对 象 数组 ， 所 
以 使 用 map 将 数组 内 容 从 字符 串 转 换 为 对 象 。 传 递 一 个 函数 到 map 方法 ，map 使 用 该 函数 


创建 的 新 元 素 构建 了 一 个 新 的 数组 ， 也 就 是 说 ， 数 组 ["a lamp", "a key"] 变 成 为 [{ item : "a 
lamp" }, {item : "a key" }]。 
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在 添加 玩家 的 HTML 之 前 ， 由 filIList 生成 的 物品 HTML 是 无 法 添加 到 页 面 上 的 ， 因 为 
玩家 HTML 中 包含 ol 元 素 ， 该 元 素 将 用 于 盛 放 物品 。 


// 将 填充 好 的 玩家 模板 添加 到 页 面 

playerDiv.innerHTML = gpwj.templates.fill (playerTemplate, data); 
//playerItems ol 刚刚 添加 到 页 面 ， 获 取 对 它 的 引用 

itemsDiv = Qocument .getELlementById( SP1IayerItems7) ， 

// 将 物品 列表 的 HTML 添加 到 playerItems ol 元 素 

itemsDiv.innerHTML = gpwj.templates.fillList(itemTemplate, items); 


3. 场所 

场所 视图 是 以 上 三 种 视图 中 最 复杂 的 一 个 ， 因 为 每 一 个 场所 都 包含 物品 和 出 口 。 不 过 ， 
显示 出 口 的 方法 与 显示 物品 的 方法 相同 ， 因 此 ， 所 谓 的 复杂 只 是 增加 了 一 次 重复 。 如 同 物品 
数据 一 样 ， 出 口 数 据 也 是 一 个 字符 串 数 组 ， 因 此 二 者 可 以 使 用 同一 个 模板 。 

以 下 代码 是 对 场所 视图 的 更 新 ， 其 中 出 口 代码 以 粗 体 显示 。 


人 代码 清单 19-16 使 用 模板 的 场所 视图 
WD (http://jsbin.com/yoquna/edit?js,console) 


i 


Nn 


(function () { 


"use strict"™; 


Var placeDiv = document.getElementBylId("place"); 


Var placeSscript = document .getElementById("placeTemplate"); 


Var itemScript = document .getElementById ("itemTemplate"™"); 


Var placeTemplate = placeScript.innerHTML; 


Var itemTemplate = itemScript.innerHTML; 
function render (place) { 
Var data = place.getData(); 
Var itemsDiv; 
var exitsDiv; 
Var items = data.items.map (function (itemName) { 
return { item : itemName }; 
}); 
var exits = data.exits.map (function (exitName) { // 使 用 map 从 字符 
// 串 数组 获取 对 象 
// 数 组 


return { item : exitName }; 
}); 
placeDiv.innerHTML = gpwj.templates.fill (placeTemplate, data); 


itemsDiv = document .getElementBylId ("placeItems"); 


itemsDiv.innerHTML = gpwj .templates.fillList(itemTemplate, 


items); 364 


exitsDiv = document .getElementById ("placeExits");//~—HplaceExitsol 
// 被 添加 ， 就 可 以 获得 对 placeExits ol 的 引用 ， 并 用 出 口 的 ETML 来 填充 它 
exitsDiv.innerHIML = gpwj.templates .fillList(itemTemplate, exits); 
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if (window.theCrypt === undefined) 1{ 


window.theCrypt = {}; 


} 
theCrypt.placeView = { 


render: render 


}) () 7 
以 上 代码 中 ， 再 次 使 用 map 将 物品 和 出 口 数据 中 的 字符 串 数 组 转换 为 对 象 数组 。 
19.6.3 ”进入 游戏 The Crypt 
在 19.6.1 节 中 出 现 的 代码 清单 19-13 是 The Crypt 在 JS Bin 上 的 运行 示例 ， 该 HTML 代 


码 中 使 用 了 模板 和 三 个 新 视图 ， 导 入 这 些 新 模块 的 script 如 下 所 示 : 

< 二 = gpwj .模板 一 一 > 

<script src="http://output.jsbin.com/pugase.js"></script> 
<!-- 玩 家 视图 --> 

<script src="http://output.jsbin.com/suyona.js"></script> 
<!-- 场 所 视图 --> 

<script src="http://output.jsbin.com/yoquna.js"></script> 
<!-- 消 息 视图 --> 

<script src="http://output.jsbin.com/jojeyo.js"></script> 


请 单 击 http://output.jsbin.com/yapiyic， 开 始 玩 游戏 吧 ! 


19.7 本 章 小 结 


国 使 用 replace 字符 串 方法 ， 将 一 个 字符 串 替换 为 另 一 个 字符 串 : 


"One too three" .replace("too"， "two"); // 返 回 "one two three" 


加 反复 调用 replace， 替 换 多 个 字符 日 


Ud 


"One too three".replace ("One", "Far") .replace ("three", "long"); 
// 返 回 "Far too long" 


图 在 条 件 为 true 时， 使 用 while 循环 执行 代码 块 : 


Var count = 10; 
while (count > 5) { // 每 一 行 显示 一 个 数字 , 分 5 行 显示 10 9 8 7 6 
console.log (count); 


count = count -— 1; 


} 


加 使 用 map 数组 方法 根据 现 有 数组 的 元 素 创 建 一 个 新 数组 。 作 为 参数 传递 给 map 的 函 
数 会 基于 旧 值 返回 一 个 新 值 : 


Var planets = ["Mercury", "Venus"] 
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国 使 用 带 有 占 位 符 的 模板 字符 串 ， 以 免 将 JavaScript 与 显示 字符 


图 通过 script 标签 的 id 局 


第 19 章 模板 : 使 用 数据 填充 占 位 符 


Var bigPlanets = planets.map(function (oldValue) { 
return oldValue + " becomes " + oldValue.toUpperCase(); 
}); 
//bigPlanets === ["Mercury becomes MERCURY", "Venus becomes VENUS"] 


混淆 : 


Ud 


Var templateString = "<h3>{{title}}</h3><p>{{body}}</p>"; 


使 用 具有 非 标准 类 型 属性 的 script 标签 将 模板 字符 串 嵌 入 HIML: 


<script type="text/template" id="postTemplate"> 
<h3>{{title}}</h3><p>{ {body}}</p> 
</script> 


型 


生 和 元 素 的 innerHTML 属性 ， 可 以 在 JavaScript 中 访问 模板 : 


Var templateString = qocument .getElementByIdq("PostTemplIate") .innerHTML; 


国 使 用 对 象 中 的 数据 填充 模板 ， 返 回 一 个 用 对 象 的 属性 蔡 换 占 位 符 后 的 新 字符 串 : 


Var data = {title: "Out of Office", body: "I’m going on an adventure!"}; 
Var template = "<h3>{{title}}</h3><p>{{body}}</p>"; 
gpwj .templates.fill (template, data); 


// 返 回 "<h3>Out of Office</h3><p>I'’m going on an adventure!</p>" 
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第 20 痘 ”XHR: 加 载 数据 


本 章 内 容 包括 ; 

图 使 用 XMLHttpRequest 对 象 加 载 数 据 
图 加 载 数据 后 调用 函数 

图 更 新 带 有 加 载 数据 的 视图 

国 JavaScript 对 象 表示 法 ( JSON ) 

图 将 JSON 文本 转换 为 JavaScript 对 象 


在 日 历 、 电 影 数据 库 和 冒险 游戏 中 都 会 使 用 大 量 的 数据 ， 新 闻 网 站 也 会 有 实时 更 新 的 重 
要 消息 和 体育 赛事 比分 。 有 时 候 ， 网 页 用 户 并 不 希望 一 次 性 加 载 所 有 数据 ， 也 不 希望 依靠 不 
断 剧 新 网 页 才能 获取 最 新 信息 。 如 果 页 面 在 加 载 之 后 ， 还 能 够 访问 实时 更 新 的 数据 ， 那 就 太 
棒 了 ! 这 样 一 来 ， 我 们 不 需要 重新 加 载 一 个 完整 的 页 面 ， 就 可 以 独立 更 新 股票 价格 、 推 特 、 
评论 、 赛 事 比 分 以 及 僵尸 的 健康 值 。 

本 章 将 介绍 如 何在 互联 网 上 伸 出 双 臂 ， 在 应 用 程序 运行 的 过 程 中 抓 取 数据 。 例 如 ， 当 我 
们 在 健身 应 用 程序 的 各 个 用 户 之 间 切 换 时 ， 可 以 加 载 不 同 用 户 的 锻炼 数据 ， 当 玩家 在 解决 游 
戏 The Crypt 难题 时 ， 可 以 一 个 坟墓 一 个 坟墓 地 加 载 各 个 位 置 的 数据 。 


20.1 构建 一 个 健身 应 用 一 一 检索 用 户 数 据 


我 们 一 直 在 构建 一 个 健身 应 用 程序 ， 让 用 户 跟 踪 记 录 他 们 的 运动 时 间 ( 见 第 14 一 16 
章 )。 该 应 用 程序 可 以 将 JavaScript 数据 转换 为 用 户 模型 ， 选 用 一 种 视图 在 控制 台 上 显示 用 
户 信息 ， 并 在 控制 台 提 示 符 处 接受 用 户 的 输入 。 在 这 个 开发 项 目 中 ， 我 们 承担 的 具体 任务 
如 下 : 

(1) 以 字符 串 形 式 检索 用 户 数据 。 

(2) 将 用 户 数 据 转换 为 用 户 模型 。 

(3) 显示 用 户 数 据 。 

(4) 为 用 户 添加 会 话 提供 一 个 接口 。 

在 前 面 章节 中 ， 我 们 已 经 完成 任务 (2) 一 〈4)， 下 面 着 手 完成 任务 (1): 通过 互联 
网 检索 用 户 数 据 。 我 们 希望 在 使 用 该 应 用 程序 时 能 够 在 不 同 用 户 之 间 进 行 切换 ， 如 图 20-1 
所 示 。 

20-1 中 显示 了 一 个 app.loadUser 方法 ， 用 于 为 第 二 个 用 户 和 第 三 个 用 户 加 载 数据 。 
在 得 到 所 需 数据 之 前 ， 首 先 需 要 某 种 方法 为 每 个 用 户 指定 数据 的 位 置 。 


I 


Console 


Mahesha 

120 minutes on 2617-62-65 
35 minutes on 2017-902-66 
45 minutes on 2917-92-66 


209 minutes so far 
Well done! 


v 


app. log("2017-02-08", 69) 


Mahesha 

129 minutes on 2017-02-05 
35 minutes on 2617-62-66 
45 minutes on 2917-02-66 
69 minutes on 2917-92-68 


269 minutes so far 
Well donel! 
n 


"Thanks for logging your session." 


》 
图 20-1 


20.1.1 查找 用 户 数据 


Console 
》app.LoadUser("pobapa") 


"Loading user details..." 


Obinna 

20 minutes on 2017-02-05 
65 minutes on 2617-692-65 
25 minutes on 2017-02-907 
35 minutes on 2017-02-09 


145 minutes so far 
Well done! 
nn 


第 20 章 XHR: 加 载 数据 
》 app.loadUser ("qapavi") 


"Loading user details..." 


Liang 
99 minutes on 2017-92-95 
96 minutes on 2017-02-06 


189 minutes so far 
Well donel 


>》 app.log("2017-92-10", 39) 


Liang 

96 minutes on 2017-62-05 
96 minutes on 2017-62-066 
39 minutes on 2917-92-19 


210 minutes so far 
Well donel! 


"Thanks for logging your session." 


?| 


使 用 健身 应 


程序 时 在 不 同 


] 户 之 间 进 行 切 换 


用 户 正 在 不 同 的 平台 和 不 同 的 设备 上 使 用 着 不 同 版 本 的 健身 应 用 程序 ， 但 是 所 有 版 本 都 


会 使 用 相同 的 数据 ， 该 数据 由 健身 应 用 中 央 服 务 器 提供 ， 


Android APP 


丽 


20-2 


在 前 面 章节 中 ， 我 们 对 健身 应 用 程序 的 开发 是 针对 单个 用 户 的 ， 


如 图 20-2 所 示 。 


ioOS App 


健身 应 用 中 央 服 务 器 提供 数据 来 源 
User Data 
Web App 
不 同 版 本 的 应 用 程序 均 使 用 相同 的 数据 来 源 


该 应 用 程序 的 所 有 版 本 都 使 


相同 的 数据 来 源 


因此 使 用 的 数据 是 静态 


文件 。 现 在 ， 我 们 希望 在 不 用 重新 加 载 整个 应 用 程序 ， 也 无 需 加 载 所 有 用 户 数据 的 情况 下 切 


换 用户 〈 我 们 希望 拥有 大 量 用 户 1)。 我 们 需要 定义 一 个 loadUser 方法 ， 针 对 某 个 用 户 ID， 


加 载 该 用 户 的 数据 ， 并 在 控制 


台 上 显示 : 


>app.loadUser ("qiwizo") 


Loading user details... 


Mahesha 


120 minutes on 2017-02-05 
35 minutes on 2017-02-06 
45 minutes on 2017-02-06 
200 minutes so far 


Well done! 
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用 户 了 D 与 JS Bin 上 的 文件 相对 应 ， 在 实际 应 用 中 ， 这 些 ID 可 能 来 自 数据 库 中 的 ID， 
也 可 能 是 一 些 不 重复 的 用 户 名 。 每 个 文件 仅 包含 一 个 用 户 的 数据 ， 以 下 是 在 http://output. 
jsbin.com/qiwizo.json 上 Mahesha 的 数据 : 


{ 


"name™" : "Mahesha", 

"sessions" : [ 
{"sessionDate": "2017-02-05", "duration": 120}, 
{"sessionDate™": "2017-02-06", "duration": 35}, 
{"sessionDate": "2017-02-06", "duration": 45} 


} 
在 运行 程序 时 ， 如 何 为 一 个 玩家 加 载 数据 ? 秘密 在 于 一 个 命名 古怪 的 XMLHttpRequest 
对 象 。 在 使 用 这 个 秘密 武器 之 前 ， 读 者 有 必要 先 了 解 一 下 如 何 使 用 远程 数据 。 
20.1.2 ”加 载 用 户 数据 一 一 概要 
我 们 需要 为 这 个 健身 应 用 程序 加 载 用 户 数据 。 每 当 用 户 调用 loadUser 方法 时 ， 应 用 程序 
就 会 通过 Internet 访问 查找 数据 、 检 索 数 据 然后 使 用 数据 。 为 了 实现 以 上 步 又， 健身 应 用 程 


图 用 于 查找 数据 的 URL 

图 检索 数据 后 所 调用 的 函数 

对 于 以 上 第 三 项 需求 ， 我 们 还 需要 进一步 考虑 。 因 为 数据 是 通过 互联 网 进行 传输 的 ， 
以 根本 不 知道 这 些 数据 是 存放 在 世界 各 地 的 哪 一 台 计 算 机 上 。 因 此 ， 找 到 和 检索 数据 都 需 
花费 时 间 《〈 和 希望 是 毫秒 ， 但 也 许 是 秒 )。 开 发 程序 需要 使 用 数据 才能 创建 新 用 户 ， 并 更 新 显 
示 。 我 们 定义 了 一 个 在 加 载 数据 时 会 调用 的 函数 : 回调 函数 〈callback function )。 其 实 ， 访 
者 在 第 18 章 曾经 遇 到 过 回调 函数 : 使 用 按钮 时 ， 需 要 一 个 在 单 击 按钮 时 就 会 调用 的 函数 ， 
仿佛 该 函数 正在 监听 单 击 按钮 事件 。 为 了 加 载 用 户 数据 ， 回 调 函 数 一 直 在 监听 即将 发 生 的 加 
载 事 件 。 加 载 用 户 数据 并 使 用 该 数据 更 新 应 用 程序 的 代码 ， 如 下 所 示 ; 


userData) { 


( 
-个 新 用 户 


function updateUser 
// 获取 数据 ， 创 建 - 
// 使 用 视图 更 新 显示 


} 
function loadData (id, callback) { 
// 使 用 ia 构建 URL 
// 数据 加 载 时 ， 让 程序 运行 callback 函数 
// 让 程序 从 URL 获取 数据 


} 


loadData ("qiwizo", updateUser); 


以 上 代码 中 ， 向 loadData 函数 传递 了 一 个 用 户 id (qiwizo) 和 一 个 updateUser 函数 ， 在 
数据 加 载 时 调用 updateUser。 
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以 上 就 


第 20 章 XHR: 加 载 数据 


是 检索 数据 所 涉及 的 大 致 流程 ， 下 面 将 介绍 实施 细节 。 


20.1.3 ”加 载 用 户 数 据 一 XMLHttpRequest 构造 函数 


如 你 所 


何 地 方 的 一 


书 将 XMLHttpRequest 简称 为 XHR 构造 函数 ， 这 个 名 字 不 仅 短 小 精 必 


是 ， 在 代码 


见 ，XMLHttpRequest 构造 函数 的 名 称 中 只 有 Request 请求) 还 算 合理 ， 整 体 来 


看 这 个 名 称 有 些 怪异 。 现 在 ， 我 们 想 要 向 某 台 计算 机 请 求 信息 ， 该 计算 机 有 可 能 是 世界 上 任 


台 服 务 器 。 读 者 可 以 将 XML 和 HTTP 作为 家 庭 作 业 继 续 研究 。 从 现在 开始 ， 本 
而 且 时 比 可 爱 。 但 


I 


-> 


中 依然 使 用 全 称 XMLHttpRequest。 


浏览 器 为 我 们 提供 XHR 构造 函数 ， 我 们 可 以 使 用 它 来 创建 XHR 对 象 ， 该 对 象 中 包括 
从 互联 网 请 求 资源 的 方法 。 我 们 将 URL 和 待 调用 函数 传递 给 XHR 对 象 ， 当 加 载 数据 时 ， 就 
会 调用 该 函数 。 图 20-3 显示 了 在 健身 应 用 程序 中 ， 使 用 XHR 对 象 为 用 户 加 载 数据 时 检索 到 


的 数据 。 


Console 


nm 
{ 
\'"'name\" : \"Mahesha\", 
\'"'sessions\" : [ 
{\"sessionDate\": \"2017-02-05\", \"duration\": 120}, 
{\'"sessionDate\": \"2017-02-06\", \"duration\": 35}, 
{\"sessionDate\": \"2017-02-06\", \"duration\": 45} 
] 
了 


图 20-3 XHR 对 象 返回 的 数据 字符 


Hd 


以 下 代码 清单 20-1 显示 ， 请 求 数据 需要 5 个 步 又 : 


(1) 使 


] XHR 构造 函数 创建 XHR 对 象 。 


(2) 声明 或 构建 URL。 


(3) 为 


XHR 对 象 提供 在 加 载 数据 时 就 会 调用 的 函数 。 


(4) 调用 open 方法 ， 将 其 传递 给 URL。 


(5) 调 


代 硬 


j send 方法 ， 以 局 动 对 数据 的 请 求 。 
3 清单 20-1 使 用 XHR 对 象 加 载 用 户 数据 


(http://jsbin.com/qakofo/edit?js,console) 


var xhr = new XMLHttpRequest(); // 步 又 (1) 使 用 XHR 构造 函数 创建 一 个 新 的 XHR 对 象 


var url = "http://output.jsbin.com/qiwizo.json";  // 步 又 (2) 存储 一 个 用 于 
/ /查找 数据 的 URL 
xhr.addEventListener ("load", function () { // 步 又 (3) 命令 XHR 对 象 在 数据 


}); 


xhr.open ("GET", url); // 步 骤 (4)j 
xhr.send () ; // 步 又 (5)j 


在 以 上 代码 中 ， 首 先 ， 使 用 new 关键 字 调用 XHR 构造 函数 ，XHR 构造 函数 会 创建 3 


// 加 载 时 就 调用 函数 


ConsSsole.1og (xhr.responseText); 


用 open， 确 定 URL 
用 send， 启 动 对 数据 的 请 求 


田 
Ei 
田 
到 


六 
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回 一 个 XHR 对 象 ， 然 后 ， 调 用 对 象 的 方法 可 以 设置 和 启动 请 求 ， 再 提供 一 个 函数 ， 一 旦 数 
据 加 载 后 就 调用 该 函数 。 在 代码 清单 20-1 中 ， 使 用 了 函数 表达 式 作 为 addEventListener 的 第 
二 个 参数 ， 其 实 也 可 以 使 用 先前 定义 过 的 函数 名 称 ， 一 旦 数据 加 载 后 ， 数 据 将 自动 分 配给 
XHR 对 象 的 responseText 属性 ， 回 调 函 数 可 以 通过 该 属性 访问 数据 。 调 用 open 函数 的 第 一 
个 参数 “GET” 是 一 个 表示 请 求 的 HTTP 方法 或 动词 。 在 本 章 中 ， 因 为 一 直 在 介绍 如 何 获取 
数据 ， 所 以 一 直 在 使 用 GET 动词 ， 实际 上 ， 还 有 一 些 其 他 动词 ， 例 如 POST、PUT 和 
DELETE。 

在 上 图 20-3 中 ， 可 以 看 到 数据 以 文本 形式 返回 。 文 本 显示 在 双 引 号 之 间 。 数 据 的 格式 
采用 JavaScript 对 象 表示 法 (JSON)， 将 在 20.2 节 中 详细 介绍 。 对 于 文本 和 字符 串 ， 不 能 像 
JavaScript 对 象 一 样 使 用 dataname 或 data ["sessions"] 等 表达 式 来 访问 数据 。 

幸运 的 是 ， 有 一 种 简单 的 方法 将 JSON 文本 转换 为 JavaScript 对 象 。 


20.1.4 ”加 载 用 户 数据 一 一 使 用 JSON.parse 解析 XHR 响应 


为 健身 应 用 用 户 加 载 数 据 后 ，XHR 请 求 运行 回调 函数 。 数 据 作 为 字符 串 自 动 分 配给 
XHR 对 象 的 responseText 属性 。 为 了 将 字符 串 转 换 为 JavaScript 对 象 的 属性 ， 并 确保 可 以 访 
问 该 属性 ， 例 如 name 和 sessions， 可 以 使 用 JavaScript 的 JSON.parse 方法 。 


El 


(ULD 
ww 
亚 


Var dataAsObject = JSON.parse (dataAsString); 


用 户 数 据 得 以 解析 并 记录 到 控制 台 上 ， 如 图 20-4 显示 。 现 在 
串 ， 而 且 是 具有 属性 的 对 象 ( 请 比较 图 20-3 和 图 20-4)。 


— 


日 户 数据 不 仅 是 字符 


Console 


[object Object] { 
name: "Mahesha", 
sessions: [[object Object] { 
duration: 120， 
sessionDate: "2017-02-05" 

}, [object Object] { 
duration: 35， 
sessionDate: "2017-02-06" 

}, [object Object] { 
duration: 45， 
sessionDate: "2017-02-06" 

1] 

jy 


图 20-4 一 旦 JSON 文本 得 以 解析 ， 就 得 到 一 个 标准 的 JavaScript 对 象 


以 下 代码 清单 20-2 是 对 代码 清单 20-1 的 更 新 ， 在 输出 数据 之 前 ， 先 对 加 载 文 本 进行 解 
析 ， 目 的 是 要 获取 一 个 JavaScript 对 象 。 


僵 。。 代码 清单 20-2 解析 JSON 文本 以 获取 JavaSeript 对 象 
Ds (http://jsbin.com/rexolo/edit?js,console) 


Var xhr = new XMLHttpRequest (); 


Var Url = "http://output.jsbin.com/gqiwizo.json"; 


xhr.addEventListener("load", function () 1{ 
var data = JSON.parse (xhr.responseText) ;/ /解析 JSON 文本 以 获取 JavaScript 对 象 
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console.log (data); 


}); 


xhr.open ("GET", url); 


xhr.send(); 


现在 ， 我 们 
方 访问 数据 ( 托 
在 本 书 中 开 


脸 上 的 表情 应 该 是 一 个 大 大 的 笑脸 。 只 需 几 行 代码 ， 就 可 以 从 世界 上 任何 地 
管 我 们 网 页 的 服务 器 可 能 存放 在 任何 地 方 )。 一 起 来 拥抱 庆祝 一 下 ! 
发 的 所 有 应 用 程序 都 可 以 从 这 个 简单 的 方法 中 获 益 : 本 书 所 有 程序 都 可 以 访 


问 JS Bin 上 的 数据 。 但 是 ， 程 序 所 生成 的 bin 代码 (例如 qiwizo) 有 些 难 以 处 理 。 在 下 一 


节 ， 将 介绍 如 何 


把 XHR 代码 打包 到 load 函数 ， 以 便 更 加 方便 地 检索 数据 。 


20.1.5 加 载 JS Bin 数据 一 一 一 个 好 用 的 函数 


本 书 中 的 其 
新 闻 页 面 和 游戏 
据 的 过 程 ， 需 要 


他 几 个 程序 ， 诸 如 测验 应 用 程序 、My Movie Ratings 页 面 、 健 身 应 用 程序 的 
The Crypt， 也 都 具有 在 运行 时 加 载 数据 的 能 力 。 为 了 简化 从 JS Bin 加 载 数 
创建 一 个 模块 : Bin Data。 


首先 ， 将 load 函数 添加 到 gpwj 命名 空间 (参见 第 19 章 )。 要 在 JS Bin 文件 中 加 载 数 


据 ， 请 使 用 以 下 


格式 的 代码 : 


function doSomethingWithData (data) { 


// 使 用 数据 做 些 令 人 惊喜 的 事 


} 


gpwj .data.load ("qiwizo", doSomethningWithData); 


以 下 代码 清 


单 显 示 了 程序 运行 中 的 load 函数 ， 输 出 如 图 20-4 所 示 。 


代码 清单 20-3 ”一 个 用 于 加 载 JS Bin 数据 的 函数 
Wy (http://jsbin.com/suxoge/edit?js,console) 


(funetron. (). i 


"use stricet": 
function loadData (bin, callback) { 


} 
if 


} 


Var xhr = new XMLHttpRequest (); 
var url = "http://output.jsbin.com/" + bin +".json"; // 使 用 bin 代码 构 
// 建 URL 


xhr.addEventListener("load", function () { 


Var data = JSON.parse (xhr.responseText); 
callback (data); // 将 加 载 的 数据 传递 给 回调 函数 


}); 


xhr.open ("GET", url); 


xhr.send(); 


(windqow.gpw]j === undefined) { 


window.gpwj] = {}; 


gpwj.data = { 


load: loadData 
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}; 
D) 0; 
gpwj .data.load ("qiwizo",console.109); ”// 测 试 该 函数 ， 命 令 它 用 加 载 的 数据 调用 
//console.1log 
在 20.3 节 ， 我 们 将 使 用 load 函数 在 游戏 The Crypt 中 获取 位 置 数据 。 其 他 几 个 程序 的 数 
据 加 载 版 可 以 在 本 书 网 站 上 获得 ， 网 址 为 www.room51.co.uk/books/getprogramming/projects/。 
下 面 就 来 对 健身 应 用 程序 进行 升级 ! 
20.1.6 ”升级 健身 应 用 程序 
健身 应 用 开发 团队 看 到 我 们 已 经 完成 的 基于 控制 台 的 工作 原型 ， 非 常 满意 。 现 在 ， 有 以 
下 三 个 更 新 任务 : 
(1) 更 新 控制 器 模块 ， 对 用 户 数据 使 用 新 的 load 函数 。 
(2) 使 用 script 元 素来 加 载 应 用 程序 使 用 的 模块 。 
(3) 添加 一 行 JavaScript 代码 ， 对 应 用 程序 进行 初始 化 。 
以 下 代码 清单 20-4 是 新 的 控制 器 模块 代码 。 程 序 中 使 用 loadUser 函数 来 调 
gpwj.data.load 方法 。loadUser 和 log 都 是 从 init 方法 返回 的 接口 。 


代码 清单 20-4 ”健身 应 用 控制 器 
(http://jsbin.com/nudezo/edit?js,console) 


上 


刀口 


(function () { 
"use strict",; 
Var user = null; 
function buildUser (userData) { /* 代 码 清单 14-3 */ } 
function updateUserFromData (userData) { // 从 加 载 的 数据 中 创建 一 个 用 户 
// 并 更 新 显示 


user = buildUser (userData); 


fitnessApp.userView.render (user); 


} 

function loadUser (id) 1{ 
gpwj .data.load (id，updateUserFromData) ;// 加 载 用 户 数据 并 调用 回调 函数 
return "Loading user aqetails..."; 


} 
function log (sessionDate,，duration) {// 定 义 一 个 函数 ， 让 用 户 记录 其 锻炼 情况 
if (user !== null) { 


user.addSession(sessionDate, duration); 


fitnessApp.userView.render (user); 


return "Thanks for logging your session."; 
} else { 


return "Please wait for user details to load."; 


} 
function init (id) 1{ 


loadUser (id); // 为 初始 用 户 加 载 数据 
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return { // 返 回 一 个 接口 对 象 
log: log, 


loadUser: loadUser 
}; 
} 
if (window.fitnessApp === undefined) { 


window.fitnessApp = {}; 
} 
fitnessApp.init = init; 


}) 0O); 


在 以 上 代码 中 ， 由 于 应 用 程序 在 运行 中 加 载 用 户 数 据 ， 有 可 能 会 出 现 用 户 在 加 载 数据 之 
前 就 已 经 记录 了 一 次 锻炼 的 情况 〈 健 身 应 用 程序 的 用 户 都 超级 热情 )。 为 了 避免 出 现 上 述 情 
况 ，log 方法 要 确保 先 设置 用 户 ，user !== null， 然 后 才 允 许 记 录 。 别 忘记 ，null 是 一 个 特殊 
的 JavaScript 值 ， 通 常用 于 表示 该 对 象 是 预期 的 ， 但 是 目前 找 不 到 或 目前 尚未 赋值 。 

既然 所 有 部 件 都 准备 到 位 ， 现 在 我 们 就 来 把 它们 组 装 到 一 起 ， 然 后 就 可 以 进入 实弹 射击 
阶段 了 。 健 身 应 用 程序 的 4 个 模块 如 图 20-5 所 示 ， 可 以 看 到 ， 我 们 用 Bin Data 模块 替换 措 
了 原先 提供 静态 数据 的 模块 。 


Bin Data Constructor View Controller 


图 20-5 ”健身 应 用 程序 的 各 个 组 成 模块 
我 们 不 必 更 改 User 构造 函数 和 视图 。 下 一 个 代码 清单 显示 用 于 加 载 4 个 模块 的 Script 元 素 。 


BB 这 。 ”代码 清单 20-5 ”健身 应 用 程序 HTML) 
My (http://jsbin.com/mikigo/edit?html,console) 


<!--fitnessApp.User --> 

<script src="http://output.jsbin.com/fasebo.js"></script> 
<!--fitnessApp.userView --> 
<script src="http://output.jsbin.com/yapahe.js"></script> 
<!--fitnessApp.controller --> 
<script src="http://output.jsbin.com/nudezo.js"></script> 


<!--gpwj.data --> 


<script src="http://output.jsbin.com/guzula.json"></script> 
我 们 已 经 加 载 好 4 个 所 需 模块 ， 下 一 步 就 要 扣 动 扳机 了 。 下 面 ， 我 们 来 执行 更 新 任务 中 的 
第 (3) 项 : 添加 一 行 JavaScript 代码 ， 调 用 fitnessApp.init， 对 应 用 程序 进行 初始 化 。 


代码 清单 20-6 初始 化 健身 应 用 程序 
(http://isbin.com/mikigo/edit?js,console) 


Var app = fitnessApp.init ("qiwizo"); 


虽然 在 本 章 开头 的 图 20-1 中 ，JS Bin 被 用 于 显示 用 户 加 载 和 记录 运动 情况 的 会 话 ， 其 
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实 ，JS Bin 是 观察 应 用 程序 运行 情况 的 最 佳 场所 。 


开发 团队 都 对 以 上 应 用 程序 的 更 新 感到 很 满意 ， 但 还 是 有 些 遗 憾 之 处 。 数 据 到 底 保 存在 


哪里 ? 本 书 第 三 部 分 一 直 在 讲解 如 何 构造 基于 HTML 的 应 用 程序 ， 为 什么 


Bin 控制 台 ? 


20.1.7 健身 应 用 程序 一 下 一 个 目标 


图 20-6 显示 了 这 款 健身 应 用 程序 的 预期 成 果 ; 
下 拉 列 表 、 文 本 框 和 按钮 。 我 们 可 以 从 列表 
话 。 读 者 利用 在 本 书 中 学 到 的 知识 ， 现 在 能 和 否 构 建 这 个 应 
敢 地 行动 起 来 ! 只 有 亲自 动手 并 努力 构建 ， 才 能 帮助 你 掌握 这 些 技能 


一 个 基于 HTML 的 健身 应 用 程 / 


选择 某 个 用 户 ， 加 载 其 详细 信息 并 记录 新 的 会 


Et 


多 ， 得 到 一 次 很 好 的 JavaScript 锻炼 机 会 


最 后 又 回 到 了 JS 


序 ， 包 含 


， 并 练 就 了 一 身 强 壮 的 编程 肌肉 。 


用 程序 ? 请 读者 不 必 瞻 前 顾 后 ， 勇 
。 抛 开 所 有 压力 和 顾 


局 ， AAA 只 需 携带 中 攻 勇 气 和 好 奇 村， 大 胆 犯 错 ， 于 求助 ? 即使 你 没有 到 达 终 点 线 ， 也 会 一 路 学 到 很 


当 你 杀 


9 尝试 之 


后 ， 就 可 以 偷偷 访问 一 下 http://jsbin.com/vayogu/edit?output， 看 看 各 部 分 组 装 在 一 起 之 后 的 
模样 (在 JS Bin 上 ， 别 态 记 单 击 Run 按钮 ， 运 行 该 程序 )。 


Fitness App 


Fitness App 


Mahesha ©$ | Load Sessions Obinna 人 Load Sessions 


Mahesha Obinna 


120 minutes on 2017-02-05 
35 minutes on 2017-02-06 
45 minutes on 2017-02-06 


20 minutes on 2017-02-05 
65 minutes on 2017-02-05 
25 minutes on 2017-02-07 


a 35 minutes on 2017-02-09 
200 minutes so far 


Well donel 145 minutes so far 
Well donel 
Log a session... 
Date Log a session... 
Date 
Duration 
(minutes) Duration 


Add Session 
Add Session 


(minutes) 


a HTML 数据 驱动 的 应 用 程序 ， 游 戏 The Crypt 是 不 二 之 选 。 


绍 。 


图 20-6 ”使 用 基于 


Fitness App 


Liang 园 Load Sessions 


Liang 


90 minutes on 2017-02-( 
90 minutes on 2017-02- 


180 minutes so far 


Well donel 


05 
06 


Log a session... 


Date 


Duration 


F Web 视图 的 健身 应 用 程序 


在 下 一 节 ， 先 对 JSON 数据 格式 做 一 个 简要 介绍 


20.2 ” JSON 一 一 一 种 简单 的 数据 格式 


(minutes) 


JSON 是 一 种 数据 格式 ， 不 仅 易 于 人 类 阅读 和 写 入 ， 而 且 易 了 
下 是 一 个 用 JSON 编写 的 日 历 活动 : 


前 在 网 络 上 进行 数据 交换 的 流行 格式 。 以 


{ 


"title" : "Cooking with Cheese", 
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"aate" : "Wed 20 June", 
"location. 3 “The Kitchen” 


} 


以 上 格式 看 似 并 不 陌生 ， 它 是 基于 JavaScript 的 一 个 子 集 。 属 性 名 称 和 字符 串 必须 放 在 
双 引 号 里 面 ， 属 性 的 值 可 以 是 数组 或 幅 套 对 象 。 下 面 是 6 月 份 的 一 些 日 历数 据 : 


"calEvents™" : |[ 

{ 
"title" : "Sword Sharpening", 
"date™" : "Mon 3 June"， 
"Location" : "The Crypt" 

} ， 

{ 
"title" : "Team Work Session' 
"date™" : "Mon 17 June"™, 
"Location'" : "The Crypt" 

}, 

{ 
"title" : "Cooking with Cheese", 
"aate" : "Wed 20 June", 
"Location" : "The Kitchen" 


} 


盟 性 的 值 还 可 以 是 数字 、 布 尔 值 、null 和 undefined， 它 们 基本 可 以 满足 我 们 所 有 需要 
(JSON 实在 是 太 强 大 了 ， 完 整 规范 请 访问 http://json.org。 看 到 该 网 页 所 示 的 JSON， 你 可 能 
会 惊叹 JSON 是 如 此 简短 ! 我 相信 ， 那 些 形似 火车 轨道 的 图 表 所 产生 的 高 效率 一 定 会 让 
你 叹为观止 !)。 

我 们 已 知 ，JSON 数据 可 以 作为 文本 进行 传输 。 下 一 步 ， 如 何 将 其 转换 为 可 以 在 
JavaScript 程序 中 使 用 的 对 象 和 数组 ? 


20.2.1 使 用 JSON.parse 将 JSON 转换 为 对 象 和 数组 

将 JSON 传递 到 JSON.parse 方法 ， 可 以 把 JSON 文本 转换 为 JavaScript 对 象 。 然 后 ， 就 
可 以 使 用 圆 点 或 方 括号 运算 符 访问 数据 中 的 属性 或 元 素 。 如 果 已 经 使 用 XHR 对 象 将 单个 日 
历 事件 的 请 求 作为 JISON 发 送 ， 则 可 以 将 响应 转换 为 如 下 所 示 的 JavaScript 对 象 : 


Var calEvent = JSON.parse (xhr.responseText); 
calEvent.title; // Cooking with Cheese 
calEvent.date; // Wed 20 June 
calEvent .location; // The Kitchen 


以 上 是 对 JSON 的 简短 介绍 。 鉴 于 整 本 书 是 关于 JavaScript 编程 ， 这 个 简短 介绍 应 该 足 
够 了 。 
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下 面 ， 我 们 返回 游戏 The Crypt， 从 一 个 神秘 房间 进入 另 一 个 神秘 房间 ， 按 需 加 载 地 图 


数据 。 


20.3 ”游戏 The Crypt 一 一 根据 需要 加 载 地 图 


游戏 The Crypt 中 的 探险 地 点 包括 古老 的 墓穴 、 


局 平 的 飞船 和 神秘 的 森林 。 玩 家 


加 载 该 文件 。 


20-7 只 显示 了 游戏 中 的 第 一 个 位 置 ， 在 游戏 开始 时 加 载 。 加 载 的 数 ] 


的 每 次 


冒险 活动 都 可 能 履 盖 几 十 个 地 点 ， 几 乎 不 可 能 在 一 个 地 方 就 完成 。 游 戏 The Crypt 并 不 是 一 
始 就 加 载 整个 地 图 ， 因 为 只 有 当 玩 家 访问 某 地 点 时 ， 加 载 该 地 点 的 地 图 才 有 意义 。 
以 将 每 个 地 点 的 JSON 数据 存储 在 JS Bin 的 单独 文件 中 ， 并 在 需要 时 使 月 


游戏 可 


昌 XMLHttpRequest 


据 应 该 包括 该 位 置 各 


The Kitchen 
qulude 
south 


xulare west 


kacaluy 


| 


上 


The Kitchen 
gqulude 
south 


xulare west 


north 
The Old Library 
kacaluy 


east jodeyo 


图 20-7 在 游戏 开始 时 ， 只 加 载 初始 位 置 数据 


4 有 当 玩 家 移动 到 某 地 点 时 ， 才 会 加 载 该 地 点 的 数据 。 图 20-8 显示 ， 在 同一 幅 地 图 
当 玩 家 从 The Kitchen 向 南 移动 时 ， 就 会 加 载 The Old Library 的 数据 。 


st jodeyo 


图 20-8 ”因为 玩家 移动 到 The Old Library， 所 以 该 位 置 的 数据 已 加 载 


为 了 实现 以 上 这 种 逐步 加 载 地 图 的 方式 ， 我 们 必须 确保 在 地 图 数据 中 存 有 每 个 位 


的 JS Bin 文件 代码 。 
20.3.1 使 用 JS Bin 文件 代码 指定 出 口 


个 出 口 的 JS Bin 文件 代码 。 例 如 ，The Kitchen 向 南 出 口 的 数据 文件 应 该 包括 代码 kacaluy。 


置 出 口 


假设 The Crypt 游戏 从 The Kitchen 开始 。 首 先 ， 游 戏 只 加 载 The Kitchen 的 数据 ， 而 不 


会 加 载 地 图 上 任何 其 他 位 置 的 数据 ， 这 样 做 使 游戏 天 
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代码 清单 20-7 显示 了 The Kitchen 单个 位 置 的 数据 (为 了 让 读者 可 以 专注 于 各 个 id， 省 略 了 


挑战 部 分 的 代码 )。 
€> 


代码 清单 20-7 The Kitchen 的 JSON 数据 
(http://output.jsbin.com/qulude.json) 


{ 


"title”" : "The Kitchen", 
"id" : "qulude", 
"description™" : "You are in a kitchen. There is a disturbing smell.", 
"items" : [ "a piece of cheese" ]， 
"exits" : [ // 包 括 每 个 出 口 目的 地 的 代码 ， 以 便 玩 家 移动 到 此 地 时 ， 就 加 载 此 地 的 数据 
{ 
"dlrectlion™ SOUEHT 
"to™" : "The Old Library", 
"id" : "kacaluy" 
hy 
E 
"Qirection'" : "west", 
"to™" : "The Kitchen Garden", 
"id" : "xulare" 
}, 
{ 
"direction™" : "east", 
"to™" : "The Kitchen Cupboard", 
"id" : "jodeyo" 
} 
] 
} 
每 个 位 置 都 有 唯一 的 id， 与 存储 该 位 置 数据 文件 的 JS Bin 代码 是 一 一 对 应 关系 。 我 们 可 


以 使 用 id 构建 一 个 位 置 的 URL， 如 下 所 示 : 


379 


Var US 三 


"nttp://output.jsbin.com/" + id + ".json"; 


玩家 将 在 地 图 上 来 回 移动 ， 解 决 谜 题 、 收 集 宝 藏 、 击 退 僵尸 和 打败 豹子 。 他 们 有 可 能 


次 访问 某 些 地 点 。 下 面 介 绍 如 何 避 免 程序 重复 加 载 相同 的 数据 。 


20.3.2 ”使 用 缓存 一 针对 每 个 地 点 只 加 载 一 次 


每 当 使 用 加 载 的 数据 创建 一 个 新 地 点 时 ， 都 会 使 用 该 地 点 的 id 作为 “ 键 ” 将 其 存储 在 


绥 存 中 ; 
复 加 载 相同 的 数据 。 


{}; 
placesStore[placeData.id] 


Var placeStore = 


= place; 


再 次 请 求 加 载 该 地 点 时 ， 就 可 以 直接 从 缓存 获取 数据 。 这 样 可 以 避免 从 JS Bin 中 习 


I 


// 设 置 一 个 对 象 来 存储 已 加 载 的 地 点 
// 使 用 


该 地 点 的 ia 作为 “ 键 ” 
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20.3.3 ”使 用 地 图 管理 器 奉 换 地 图 数据 模块 和 地 图 构建 党 模块 


游戏 The Crypt 的 地 图 构建 器 用 于 为 整个 地 图 获取 数据 ， 创 建 所 有 地 点 模型 ， 然 后 向 地 
点 添加 物品 、 出 口 和 挑战 。 该 地 图 构建 器 为 整个 地 图 完成 了 以 上 工作 ， 就 会 返回 第 一 个 


[EE 


点 ， 准 备 开始 游戏 。 现 在 ， 我 们 每 次 只 加 载 一 个 地 点 ， 就 需要 一 个 函数 加 载 单个 地 点 的 数 
据 ， 还 需要 另 一 个 函数 使 用 已 加 载 的 数据 构建 单个 地 点 模型 。 


以 下 代码 清单 20-8 是 一 个 新 的 地 图 管 


理 器 (Map Manager) 模块 代码 ， 它 将 替换 The 


Crypt 游戏 早期 版 本 中 使 用 的 地 图 构建 器 代码 图 20-9)。 地 图 管理 器 模块 在 其 接口 中 提供 


单一 方法 loadPlace.Use， 可 以 使 用 先前 定义 的 回调 函数 或 函数 表达 式 来 调用 该 方法 : 


// 使 用 先前 定义 的 函数 作为 回调 函数 


theCrypt.map.loadPlace ("gqiwizo", doSomethingWithPlace); 


// 使 用 函数 表达 式 作 为 回调 函数 


theCrypt.map.loadPlace ("qiwizo", function (place) { 


// 使 用 地 点 模型 


}); 
Map 
Views 
We ME nels Model Constructors Controller 
playerView 
Utilities - gpwj Playe? Controller 
pla h 
Templates place Commands 
ne geVle 
Bin Data 
图 20-9 重点 显示 游戏 中 的 新 模块 和 更 新 模块 


人 代码 清单 20-8 地 图 管理 器 
(http://jsbin.com/xesoxu/edit?js) 


(function () { 
"use strict",; 
Var placesStore = {}; 


function addPlace (placeDa 


// 使 用 一 个 对 象 作为 已 加 载 地 点 的 缓存 
ta) 


var place = new theCrypt.Place( // 使 用 地 点 数据 创建 Place 对 象 


placeData.title, placeData.description); 


placesStore[placeData.id] = place; // 将 新 创建 的 地 点 缓存 在 placesStore 


// 中 ,使 用 其 iq 作为 “ 键 ” 


if (placeData.items !== undefined) { 


placeData.items.for 


Each (place.addItem); 


if (placeData.exits 


1== undefined) { 


placeData.exits.forEach (function (exit) { 


place.addExit (exit.direction, exit.id); // 为 指定 方向 的 出 
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place.addChallenge (exit.direction, exit.challenge); 


}); 
} 
return place; 


} 


function loadPlace (id, callback) { 


= placesStore[id]; 
=== undefined) { 


function 


var plac 
站 


(plac 
gpwj .data.load (iqd, 
var place = addPlace (plac 
callback (place); 
}); 
} else { 


callback (place); // 如 


// 使 用 


// 函 数 包括 一 个 callback 形 参 ， 以 便 
// 使 用 加 载 地 点 来 调用 该 函数 


// 检 查 缓存 , 看 是 否 有 所 请 求 的 地 点 
// 仅 加 载 缓存 中 没有 的 地 点 数据 
(placeData) { // 使 用 Bin 数据 模 
// 块 加 载 数据 


eData); 


从 数据 中 新 构建 的 地 点 调 


调 函数 


果 某 地 点 已 经 加 载 过 ， 请 使 用 缓存 中 的 该 地 
调用 回调 函数 


// 点 


} 


I undefined) 


(window.theCrypt === 


window.theCrypt = {}; 


} 
theCrypt.map = { 


loadPlace: loadPlace 


) () 7 


{ 


地 图 管理 器 由 两 个 函数 组 成 。 
1. 把 一 个 地 点 添加 到 存储 中 


addPlace 函数 首先 使 用 Place 构造 函数 根据 数据 创建 出 一 个 地 点 模型 ， 


下 面 依次 探讨 这 两 个 函数 。 


然后 为 其 添加 物 


品 、 出 口 和 挑战 ， 再 将 该 地 点 存储 在 缓存 中 ， 最 后 返回 新 的 地 点 模型 。 


function addPlace (placeData) { 
// 创建 一 个 地 点 模型 
// 将 该 地 点 存 入 缓存 中 
// 添加 物品 
// 添加 出 口 和 挑战 
// 返回 新 的 地 点 模型 


} 


关于 这 个 函数 ， 除 了 缓存 部 分 ， 其 他 内 容 在 前 面 章节 中 都 已 经 讲 过 ， 不 再 袭 述 。 


2. 为 单个 地 点 加 载 数据 
当 调 
地 点 模型 作为 实 参 调 用 该 回调 函数 ， 如 下 所 示 : 


callback (place); 


] loadPlace 函数 时 ， 需 要 为 其 提供 欲 加 载 地 点 的 id 和 一 个 回调 函数 。 使 用 该 id 的 
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loadPlace 函数 从 哪个 渠道 获得 地 点 模型 ? 首先 ， 它 尝试 从 缓存 中 获取 该 地 点 ;如 果 在 组 
存 中 找 不 到 ， 就 从 JS Bin 中 加 载 该 地 点 模型 。 代 码 如 下 


var place = placesStore[id]; // 尝试 从 缓存 中 获得 该 地 点 
if (Place === undefined) 
// 该 地 点 不 在 缓存 中 
// 从 JS Bin 加 载 该 地 点 数 
// 将 该 地 点 传递 给 回调 函数 
callback (place); 


ml 


} else { 
// 该 地 点 在 缓存 中 
// 将 该 地 点 传递 给 回调 函数 
callback (Place) 


O 


} 
如 果 loadPlace 函数 必须 加 载 数据 ， 就 会 使 用 Bin Data 模块 的 load 函数 从 JS Bin 中 获取 


数据 。 既 然 该 地 点 不 在 缓存 中 ， 代 码 就 会 将 地 点 数据 传递 到 addPlace， 以 便 先 创建 和 存储 该 
模型 ， 再 将 新 的 地 点 模型 传递 到 回调 函数 。 


gpwj.data.load(id, function (placeData) { 
var place = addPlace (placeData); / /创建 和 存储 一 个 地 点 模型 
callback (place); // 将 新 的 地 点 模型 传递 到 回调 函数 


}); 


现在 ， 我 们 已 经 掌握 了 数据 加 载 知识 ， 下 面 将 把 这 些 知 识 应 用 到 游戏 控制 占 中 ， 先 加 载 
一 个 初始 地 点 ， 再 随 玩家 移动 到 一 个 新 的 地 点 。 


20.3.4 ”更 新 游戏 控制 如 


为 了 使 用 新 的 地 图 管理 器 ， 需 要 对 游戏 控制 器 中 的 两 个 方法 进行 更 新 。 以 前 ， 我 们 使 用 
init 方法 调用 buildMap， 构 建 一 整 张 地 图 。 现 在 init 方法 将 调用 loadPlace， 仅 加 载 游戏 中 的 
第 一 个 地 点 。 因 为 现在 不 再 预 加 载 地 点 ， 因 此 go 方法 需要 调用 loadPlace， 从 缓存 中 查找 一 
个 地 点 或 者 从 JS Bin 加 载 一 个 地 点 。 

以 下 代码 清单 显示 了 对 游戏 控制 器 中 的 两 个 方法 进行 的 更 新 。 
党 代码 清单 20-9 使 用 地 图 管理 器 的 游戏 控制 器 


[本 (http://jsbin.com/vezaza/edit?js) 


(funietion A() 过 

"Use StELCC"; 

var player; 

Var linPlay = false; 

function init (firstPlaceld, playerName) { 

theCrypt .map .loadPlace( // 使 用 loadPlace 加 载 游 戏 中 的 第 一 个 地 点 并 
// 运 行 init 代码 
firstPlacelId, function (firstPlace) { 


Player = new theCrypt.Player (playerName, 50); 
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player.addIitem("The Sword of Doom"); 
player .setPlace (firstPlace); 
inPlay = true; 
render () ; 
}); 
} 
function go (direction) { 
if (inplay) { 
/* 声明 变量 */ 


if (destination === undefined) { 


renderMessage ("There is no exit in that direction"); 


} else { 


if ((challenge === undefined) || challenge.complete) { 
theCrypt .map.1loadPlace ( // 加 载 玩 家 的 新 地 点 

destination, function (place) { 

player. setPlace (place) ; // 加 载 后 ， 将 该 地 点 设置 为 玩家 的 位 


// 置 并 更 新 显示 
render () ; 
}); 
} else { 
/* 应 用 挑战 */ 
} 
} 
} else { 
renderMessage ("The game is over!"); 


} 

/* 其 他 函数 */ 

window.game = { . }; // 分 配 公共 
}) (); 


在 加 载 开始 位 置 之 前 ，init 方法 几乎 无 法 工作 。 因 此 ，init 方法 的 大 部 分 代码 是 放 在 回调 
函数 内 部 传递 给 loadPlace。go 方法 也 是 使 用 loadPlace 获取 位 置 ， 然 后 将 其 设置 为 玩家 的 新 


人 


\ 多 百 .。 


上 


20.3.5 ”构建 游戏 页 面 


万 事 俱 备 ， 现 在 我 们 只 需 导 入 各 个 模块 ， 再 添加 几 行 JavaScript， 就 可 以 对 游戏 进行 初 
始 化 了 。 

以 下 代码 清单 显示 了 该 游戏 的 完整 HTML。 其 中 消息 div 和 命令 文本 框 的 位 置 已 经 移 至 
地 点 和 玩家 部 分 的 上 方 。 


SS 代码 清单 20-10 The Crypt (HTMIL) 
(http://jsbin.com/cujibok/edit?html,output) 


<!IDOCTYPE html> 
<html> 
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<head> 
<meta charset="utf-8"> 
<title>The Crypt</title> 
</head> 
<body> 
<nhnl>The Crypt</hn1> 
<div id="messages" class="hidden"></div> 
<div id="controls"> 
<input type="text" id="txtCommand" /> 
<input type="button" id="btnCommand" value="Make it so" /> 
</div> 
<div id="views"> 
<div id="place"></div> 
<div id="player"></div> 
</div> 
<1!1-- 各 个 模板 --> 
<script type="text/x-template" id="itemTemplate"> 
<1i>{{item}}</1i> 


384 </script> 


<script type="text/x-template" id="playerTemplate"> 
<h3>{{name}}</h3> 
<p>{{health}}</p> 
<ol id="playerIitems"></ol1> 

</script> 

<script type="text/x-template" id="placeTemplate"> 
<hn3>{{title}}</h3> 
<p>{{description}}</p> 


<div class="placePanel"> 


<h4>Items</h4> 
<ol id="placeIltems"></ol1> 
</div> 


<div class="placePanel"> 


<h4>Exits</h4> 
<ol id="placeExits"></ol> 
</div> 
</script> 


<script type="text/x-template" id="messageTemplate"> 
<p>*** {{message}} ***</p> 


</script> 
zi==> 痢 相模 攀 = 
<!-- gpwj.templates -一 > 


<script src="http://output.jsbin.com/pugase.js"></script> 
<!-- gpwj.data --> 

<script src="http://output.jsbin.com/guzula.js"></script> 
<!-- 地 点 构造 器 --> 

<script src="http://output.jsbin.com/vuwave.js"></script> 
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<!-- 玩家 构造 器 --> 


<script src="http://output.jsbin. 


<!-- 玩家 视图 --> 


<script src="hnttp://output.jsbin. 


<!-- 地 点 视图 w --> 


<script src="nhnttp://output.jsbin. 


<!-- 消息 视图 --> 


<soript sre="http://output. jsbin. 


<!-- 地 图 管理 器 --> 


<script src="http://output.jsbin. 


<!-- 游戏 控制 器 --> 


<script src="http://output.jsbin. 


<!-- 网 页 控件 --> 


<script src="http://output.jsbin. 


</body> 
</html> 


com/nonari. 


com/suyona.] 


com/yoquna.] 


com/jojeyo.] 


Com/xesoxu. 


com/vezaza. 


Com/xoyasi.] 
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js"></script> 
S"></SOELBtS 
Ss"></script> 
S'S</SCELBES> 
js"></script> 


js"></script> 


s"></script> 


以 下 代码 清单 显示 了 JavaScript 初始 化 代码 ， 为 游戏 始 发 地 的 数据 文件 指定 了 JS Bin 


代码 。 


代码 清单 20-11 The Crypt 
(http://jsbin.com/cujibok/edit?js,output) 


Var playerName = "Kandra"; 
Var firstPlaceld = "vitewib"; 


game.init (firstPlacelId, playerName); 


20.3.6 ”进入 游戏 The Crypt 


// 为 地 图 中 第 - 


太 棒 了 ! 游戏 的 各 个 模板 与 其 他 部 分 的 HTML 完美 结合 。 


就 不 必 面 对 JavaScript、 数 据 和 HTML 三 者 交织 在 一 起 的 混乱 


-个 地 点 指定 Js Bin 文件 的 id 


以 后 ， 如 果 需 要 改变 设计 ， 


需要 修改 的 模板 。 对 开发 者 而 言 ， 这 样 的 程序 更 易于 


来 更 大 的 快乐 。 胜 利 ， 胜 利 ， 胜 利 ! 


局 


和 E 护 ， 更 不 易 出 错 ， 也 意味 着 给 我 们 带 


用， 而 是 可 以 很 容易 地 找到 


a 


现在 就 可 以 开始 玩 游戏 了 ! 你 唯一 的 目标 就 是 在 游戏 中 求生 存 ， 在 JS Bin 上 考验 你 的 力 
量 、 技 能 和 耐力 。 祝 你 好 运 ! 游戏 网 址 是 http://output.jsbin.com/cujibok。 


20.4 本章 小 结 


国 使 用 XMLHttpRequest 对 象 为 网 页 加 载 资 源 ， 


加 使 用 JSON 〈 一 种 简洁 易 懂 的 JavaScript 数据 交 ] 


山 | 


而 不 需 重新 加 载 整个 页 面 。 
换 格 式 ) 传输 应 用 程序 的 数据 。 


图 为 了 加 载 数据 ， 首 先 创 建 XMLHttpRequest 对 象 ， 然 后 为 load 事件 设置 事件 监听 器 ， 


再 使 用 资源 的 URL 调用 open 方法 ， 最 后 调用 send 方法 : 


Var xhr = new XMLHttpRequest (); 


xhr.addEventListener("load", function () { 
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// 使 用 xhr.responseText 
}); 
xhr.open ("GET", url); 


xhr.send(); 


国 当 load 事件 被 触发 时 ， 通 过 XHR 对 象 的 responseText 属性 访问 JSON 数据 。 
图 将 JSON 数据 字符 串 传递 到 JSON.parse 方法 ， 转 换 为 JavaScript 对 象 : 


Var data = JSON.parse (xhr.responseText); 


图 使 用 JavaScript 对 象 作为 缓存 。 首 先 将 加 载 过 的 数据 或 模型 放 入 缓存 ， 然 后 在 使 用 
XHR 之 前 检查 缓存 。 
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本 章 内 容 包 括 : 

图 深化 成 果 

图 在 本 地 处 理 文件 
图 图 书 和 资源 


如 果 读 者 提问 ， 如 何 使 用 JavaScript 编程 ? 
我 的 回答 是 ， 你 们 正在 使 用 JavaScript 编程 。 
如 果 你 真 的 想 要 理解 编程 ， 就 必须 行动 起 来 ， 动 手 编写 程序 。 


来 学 习 编程 也 许 轻松 有 趣 ， 也 能 够 让 你 增长 知识 ， 但 是 只 有 亲自 解决 问题 和 编写 代码 才能 真 
正 提高 编程 技能 、 积 累 经 验 并 增强 抗 挫 能 力 。 请 读者 放心 ， 你 并 不 是 孤军 奋战 。 如 果 你 暂时 
困 在 一 个 项 目 上 不 得 进展 ， 或 者 是 对 一 些 代 码 百 思 不 得 其 解 ， 在 本 章 中 ， 你 将 看 到 求助 的 平 
首先 介绍 如 何在 自己 本 地 计算 机 上 保存 的 网 页 中 使 用 JavaScript， 而 不 是 在 


台 。 下 面 ， 我 作 
JS Bin 上 使 用 JavaScript。 


eed 


21.1 在 本 地 处 理 文件 


通过 阅读 书籍 和 思索 代码 


JS Bin 和 其 他 在 线 编码 网 站 是 很 好 的 实验 场所 ， 可 供 我 们 实验 新 的 想法 ， 还 可 以 检验 代 


码 的 运行 情况 。 但 是 ， 现 在 我 们 想 摆脱 沙 盒 环境 ， 创 建 自己 的 网 站 。 本 节 将 介 各 


( 即 自己 的 计算 机 上 ) 编写 和 保存 文件 ， 并 在 浏览 器 中 打开 文件 。 
21.1.1 编写 代码 
JavaScript 和 HTML 文件 都 是 文本 文件 ， 可 以 在 任何 文本 


3 如 何在 本 地 


编辑 器 中 对 其 


进行 编写 。 


Windows 上 的 Notepad〈 记 事 本 ) 和 OS X 上 的 TextEdit 尽管 都 非常 简单 ， 却 都 可 以 胜任 此 


项 工作 。 更 高 级 的 文本 编辑 器 支持 语法 高 亮 ， 可 以 使 用 不 同 颜色 将 关键 字 从 变量 、 参 数 、 字 


符 串 等 其 他 内 容 中 区 分 出 来 ， 可 以 对 输入 内 容 提 供 建 议 ， 还 可 以 为 快速 插入 提供 建议 。 目 前 
比较 流行 的 编辑 器 有 Sublime Text、BBEdit、Notepad ++、Atom 和 Emacs。 
工具 ， 例 如 相互 协作 ; 跟 
踪 各 版 本 ; 合并 、 缩 小 和 压缩 文件 等 。 目 前 比较 流行 Visual Studio、Dreamweaver、Eclipse 
和 WebStorm。 图 21-1 显示 了 三 个 编辑 器 : Notepad、Notepad++ 和 WebStorm， 它 们 对 项 
目的 支撑 水 准 依 次 提高 ， 也 就 是 说 ， 这 三 者 当中 ，Notepad 对 项 目的 文 撑 水 准 最 低 ， 


另外 ， 还 有 集成 开发 环境 (IDE)， 可 以 提供 更 多 的 项 目 管理 


WebStorm 最 高 。 
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关 Untitied - Notepad 
File Edit Format View Help 
Fun Tn Yse 下 em， grection Fie Edt Search View Encodng Language Settngs Maao Run 
i inplay) E GB Ce 3 & 
var place 二 player.getp1all o 思 月 己 6。.o 全 | 兴 蚤 人 | 引 C| 的 各 | 
日 es | 


var challenge = place.get 
i 日 function use (item, 


2 口 if (inplay) / 
if (item === challenge. | @ 


30 | 
renderMessage(challen | 
Shallenge. complete = | 


if (challenge === undefin 
renderMessage("You don" 
} else if (player.hasIitenm 


direction) 


if (challenge. itemCon 
player.removeItem(i 
if (chal 
else { 
renderMessage(challen zendez 


} else { 9 | 
renderMessage("You don" ES . 


} else { 
renderMessage("The game i rend 
} chal. 
[=| if (9 


} else 

7 zende 
18 上 
19 | 
20 | } else { 
220 | rendezrl 
22 } 
2 | } else { 
六 | renderMe 
2 | } 

L | 
Davasaript fle jength : 
图 21-1 


21.1.2 保存 文件 


本 节 讲 解 如 何 有 条 理 地 保存 文件 ， 即 如 何 
项 目 进行 保存 。 图 
不 同 的 文件 夹 存放 各 类 文件 : 样式 表 存 于 css， 


ELE3 


Plugns Window ? 


JavaScript 开发 实战 ER 


醒 T:\Web server Admin\testjs - Notepad++ 男 回 区 


X 


本 [si 目 E 可 TEST3 


| 国 辐 园 


EE 


{ 


Terminal 


Notepad、Notepad ++ 和 WebStorm 


使 用 合 


的 文件 夹 ; 


[上 


21-2 显示 了 theCrypt 文件 夹 内 的 文件 存放 结构 。 在 该 文件 夹 内 ， 分 别 使 


ej colors.js - Room51 - [~/Documents/Development/Room! 


nge = place.getCha 


(destination = 
renderMessage( 


render(); 


各 文件 分 类 或 按照 不 同 的 子 


JavaScript 文件 存 于 js， 游戏 地 图 存 于 maps， 


主要 的 HTML 文件 theCrypt.html 位 于 该 项 目的 根 目 录 中 。 在 GitHub 代码 库 中 可 以 找到 本 书 
所 有 应 用 程序 的 文件 夹 ， 网 址 是 https:/github.conyjrlarsen/GetProgramming。 


v 国 theCrypt A 
> css 
> js 
> maps Y 

ej theCrypt.html 


4 | 


9 


图 21-2 


j theCrypt 


gj theCrypt.css 


g@ commands.js 
®| gameController.js 
8 mapManager.js 

g@ messageView.js 

®) place.js 

® placeView.js 

®) player.js 

B playerView.js 

gj template.js 


天 maps 


g@j TheDarkHouse.js 
theCrypt.html 


theCrypt 文 伯 
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文件 名 称 应 该 表明 该 文件 的 目的 。 虽 然 JS Bin 会 为 文件 分 配 随机 名 称 ， 但 是 这 并 不 意味 
着 我 们 应 该 这 样 做 。 以 下 代码 清单 显示 了 游戏 的 HTML 文件 ， 其 中 包含 用 于 加 载 JavaScript 
的 script 元 素 ， 在 head 部 分 中 有 一 个 link 元 素 ， 用 于 加 载 为 页 面 设置 样式 的 CSS 文件 ， 该 
代码 清单 中 省 略 了 那些 无 任何 更 改 的 模板 。 


< 代码 清单 21-1 theCrypt.html 中 的 script 元 素 
WD 


<!IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<link rel="stylesheet" href="css/theCrypt.css" /><!-- 加 载 css 文件 ， 
设置 页 面 的 样式 --> 


<title>The Crypt</title> 
</head> 
<body> 
<hl>The Crypt</h1> 
<div id="player"></div> 
<div id="place"></div> 
<div id="messages"></div> 
<p id="controls"> 
<input type="text" id="txtCommand"> 
<button id="btnCommand">Make it so</button> 
</p> 
<!-- 模板 --> 
<!-- 无 改变 部 分 请 参阅 前 面 章 节 --> 
<!-- 模块 --> 
<script src="maps/TheDarkHouse.js"></script> <!-- 可 以 使 用 相对 路 径 
加 载 script 文件 --> 
<script src="js/mapManager.js"></script> 
<script src="js/template.js"></script> 
<script src="js/player.js"></script> 
<script src="js/place.js"></script> 
<script src="js/playerView.js"></script> 
<script src="js/placeView.js"></script> 
<script src="js/messageView.js"></script> 
<script src="js/gameController.js"></script> 
<script src="js/commands.js"></script> 
</body> 
</html> 


在 src 属性 中 使 用 的 路 径 告诉 浏览 器 在 哪里 能 够 找到 与 theCrypt.html 相关 的 加 载 文件 。 
例如 ，maps/TheDarkHouse.js 表示 从 Crypt.html 所 在 的 文件 夹 开 始 ， 先 找到 maps 文件 夹 ， 然 
后 在 该 文件 夹 中 找到 名 为 TheDarkHouse.js 的 文件 。 
21.1.3 在 浏览 颈 中 打开 页 面 

在 浏览 器 菜单 中 ， 选 择 File 〈 文 件 )， 再 选择 Open (打开 )， 然 后 浏览 本 地 计算 机 的 文 
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件 系统 ， 找 到 并 单 击 theCrypt.html， 就 会 在 浏览 器 中 打开 该 页 面 。 
21.1.4 合并 和 压缩 文件 


如 果 在 Web 服务 器 
JavaScript 模块 都 放 在 一 
求 文件 ， 该 文件 由 src 属性 


上 托管 某 个 项 目 以 供用 户 通过 互联 网 访问 ， 那 么 最 好 将 所 有 的 
个 文件 中 。 原 因 在 于 ， 针 对 每 个 script 元 素 ， 浏 览 器 都 要 向 服务 器 ; 
指定 ， 如 果 需 要 加 载 所 有 文件 才能 使 该 应 用 程序 运行 ， 那 么 加 载 


i 


二 个 大 文人 


我 们 可 以 在 JS Bin 


com/xewozi/edit?]js,output。 


F 比 加 载 很 多 小 文件 耗 时 更 少 。 
上 看 到 ，The Crypt 的 所 有 JavaScript 包含 在 一 个 bin 中 : 


http://jsbin. 


在 开发 应 


用 程序 时 ? 


] 各 个 单独 的 文件 有 益 于 明确 、 重 用 和 灵活 性 。 但 是 ， 在 发 布 应 


个 


程序 时 ， 使 
合并 文件 会 有 助 于 更 快 地 加 载 代 码 。 开 发 者 可 以 手动 截取 代码 并 将 其 复制 到 单 


文件 ， 


bb 可 以 使 
趣 ， 可 以 关注 Grunt、Gulp、Browserify 和 CodeKit。 
这 些 工 具 还 
空格 和 换行 符 ， 


] 工 其 来 帮忙 。 以 下 工具 可 能 对 初学 者 来 说 有 些 过 于 先进 ， 如 果 读 者 有 兴 


可 以 将 代码 压缩 成 一 个 较 小 的 文件 。 当 浏览 器 运行 JavaScript 时 ， 并 不 需要 
它们 只是 用 于 帮助 人 类 阅读 和 理解 代码 ; i 例如 变 
与 变量 loadData、checkGameStatus、renderMessage 完全 等 效 。 因 此 ， 这 些 


Ei 


J 
SN 


并 重新 命名 变量 以 创建 一 


ET 
个 更 小 的 文件 ， 该 文件 的 执行 效果 并 无 任何 改变 。 下 面 两 


高 
个 代码 清单 显示 了 相同 的 代码 ， 取 自 The Crypt 控制 器 模块 的 use 函 


NW 
o 


到 代码 清单 21-2 use 函数 〈 缩 小 版 ) 


F 
0 


there") 


d 
9 


所 
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代码 清单 21-3 use 


a) {if(s () ， 
===i||i.complete===!0?t ("You don't need to use that 


unction rl(e, ) {var o=1l.getPlac (a) ;void 


i=o.getChalleng 


:1 .hasItem(e) ?e===i.requires?(t(i.success) 
e)) :t("You don't have that item") }els 


ame is over!")} 


;i.complete=!0,1i.itemConsume 
em Me 


&&l1 .removeItLem ( :t (i.failure) 


函数 


unction use (item, qirection) { 
if (inplay) { 


var plac 


(); 
Var challenge = Place.getChalleng 
if (challenge === undefined || challeng === true) { 


renderMessage ("You don't need to use that there"); 


= player.getPlac 


(direction);} 


.Complet 


} ELSE Ef 
在 


(player.hasIitem(item)) { 


(item === challeng 
(chal 
.Complet 


.requires) { 


renderMessag .Success); 


leng 


challeng 
站 


i bl 
(challenge.itemConsumed) { 
m(item); 


player.removelIt 


} 


} else { 


renderMessage (challenge.failure); 


} 


} else { 


第 21 章 结语 : 使 用 


renderMessage ("You don't have that item"); 


} 


} else { 
renderMessage ("The game is over!"); 
} 
} 
通过 对 比 以 上 两 个 代码 清单 ， 读 者 应 该 可 以 理解 压缩 文件 的 意义 所 在 。 


21.2 ”获取 帮助 


现在 ， 你 基本 上 已 经 通读 完 本 书 ， 可 以 看 出 你 很 


JavaScript 编程 


E 视 有 指导 、 有 组 织 的 学 习 。 但 是 ， 这 


并 不 意味 着 你 已经 真正 上 路 并 走 上 正轨 。 我 建议 读者 能 够 深入 地 挖掘 资源 ， 寻 找 问题 ， 并 就 


具体 问题 寻求 帮助 。 本 书 推荐 一 个 很 好 的 求助 网 站 ， 供 


你 参考 : Mozilla Developer Network 


(https://developer.mozilla.org )。 该 网 站 上 有 许多 HTML、CSS 和 JavaScript 示例 。 如 果 你 在 寻 
求 具 体 问 题 的 解决 方法 ， 请 加 入 stackoverflow 论坛 (http://stackoverflow.com)， 该 论坛 的 成 
员 通 常会 快速 解答 问题 ， 关 于 JavaScript 的 问题 已 经 突破 一 百 万 个 ， 在 众多 编程 语言 中 ， 


JavaScript 率先 达到 一 百 万 ! 


21.3 “后续 推荐 


本 书 是 一 本 编程 入 门 书 。 第 一 部 分 介绍 了 JavaScript 语言 的 基础 知识 ， 第 二 和 第 三 部 分 


提供 一 本 完整 的 编程 参考 书 ， 而 是 为 读者 提供 一 次 编程 的 实践 体验 。 建 议 读者 在 阅读 本 书 


后 ， 继 续 深入 学 习 …… 


21.3.1 本 书 网 站 


组 织 构建 了 一 些 稍 大 的 项 目 ， 为 将 来 做 更 大 的 项 目 做 好 准备 。 撰 写本 书 的 目的 并 非 是 为 读者 


在 本 书 网 站 上 可 以 看 到 持续 更 新 的 文章 、 教 程 、 视 频 、 资 源 、 示 例 以 及 其 他 参考 网 站 的 
链接 。 网 址 如 下 : www.room51.co.uk/books/getprogramming/index.html。 
该 网 站 内 容 还 包括 在 本 书 没 有 介绍 的 一 些 主题 ， 例 如 原型 、 继 承 、 使 用 this、Node.js 和 


JavaScript 的 最 新 增补 内 容 ， 另 外 还 有 对 本 书 中 应 用 程序 的 改进 指南 ， 例 如 识 


健身 应 用 程序 、 健 身 应 用 程序 新 闻 以 
21.3.2 图 书 


及 电影 评分 应 用 程序 等 。 


| 验 应 用 程序 、 


市 场 上 有 很 多 关于 JavaScript 编程 的 书籍 ， 下 面 推荐 我 辕 读 过 并 非常 喜欢 的 两 本 书 。 第 


一 本 可 以 作为 本 书 的 后 续 书 籍 ， 第 二 


本 是 对 JavaScript 语言 更 加 深入 的 探索 : 


国 Eloquent JavaScript: A Modern Introduction to Programming (No Starch Press; 2 ed.， 


2014) by Marijn Haverbeke 


国 Professional JavaScript for Web Developers (Wrox; 3rd ed., 2012) by Nicholas C. Zakas 
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21.3.3 ”网 站 


许多 网 站 将 视频 教程 与 互动 练习 相 结 合 。 我 本 人 特别 喜欢 Code School，http://codeschool. 
com。 该 网 站 人 员 还 建立 了 一 个 不 错 的 JavaScript 介绍 性 网 站 ，http://javascript.com。 


请 读者 继续 实践 ， 到 JS Bin 去 调试 程序 。 本 书 的 网 站 上 有 一 些 对 编程 项 目的 建议 ， 如 果 
有 不 理解 之 处 ， 请 随时 在 Manning.com 的 书籍 论坛 上 发 布 问 题 (https://forums.manning.com/ 
forums/get-programming-with-javascript)， 或 者 在 stackoverflow.com 加 入 社区 论坛 。 

希望 读者 能 够 边 读书 边 实践 ， 在 JS Bin 上 实验 代码 ， 大 胆 猜测 并 验证 你 的 各 种 想法 。 让 
我 们 保持 好 奇 心 ， 勇 敢 地 进行 JavaScript 开发 实战 吧 ! 


21.4 ”本章 小 结 


TT 


国 使 用 文本 编辑 器 编写 并 保存 JavaScript 和 HTML 文件 。 
国 使 用 文件 夹 和 适当 的 文件 名 来 整理 一 个 项 目的 文件 。 

图 在 浏览 器 中 打开 HIML 文件 。 
图 在 Mozilla Developer Network 和 stackoverflow.com 了 解 更 多 信息 ， 
国 充分 利用 本 书 网 站 上 的 资源 。 

四 实践 ， 实 践 ， 再 实践 。 

图 请 读者 在 探索 中 保持 好 奇 心 、 冒 险 劲 、 适 应 力 和 忍耐 力 。 视 各 位 探险 顺利 ! 


De 


取 帮 助 。 
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索引 中 的 页 码 为 英文 原 书 的 页 码 ， 与 书 中 边栏 的 页 码 一 致 。 


图 符号 


!== operator (1== 运 算 符 ), 209 

* Operator (* 运 算 符 ), 21, 42 

+ Symbol (+ 符号 ), 28 

+= operator (+= 运 算 符 ), 98, 110, 126, 154 
<= operator (<= 运 算 符 ), 209, 289 

= operator (= 运算 符 ), 74 

<= Symbol (<= 符 号 ), 204 


力 人 


abstraction (抽象 ), 25 

add function (add 函 数 ), 70-71, 73-74 

addAge function (addAge 函 数 ), 151 

addChallenge method (addChallenge 方 法 ), 258 

addEventListener method(addEventListener 方 法 ) 326， 
330, 372 

addExit method (addExit 方 法 ), 158, 175-176, 254， 
201 

addExits method (addExits 方 法 ), 139 

addItem method (addItem 方 法 ), 137, 254, 272 

addItems method (addItems 方 法 ), 139 

addMoon method (addMoon 方 法 ), 129 

addPlace method (addPlace 方 法 ), 382 

addSession method (addSession 方 法 ), 250-251, 265 

alert function (alert 方 法 ), 330 

answer variable (answer 变 量 ), 174 

app.loadUser method (app.loadUser 方 法 ), 368 

app.log method (app.log 方 法 ), 281, 284 

applyDamage method (applyDamage 方法 ), 270 


二 


area property (area 属性 ), 85 
arguments (参数 / 实 参 ) 
determining return value using (使 用 参数 来 确定 返 
可 值 ), 72-75 
passing multiple arguments to function (将 多 
参 传递 给 一 个 函数 ), 63-64 


个 实 


= Symbol (= 符号 ), 18 

=== operator (=== 运 算 符 ), 199-200, 209 
/operator (/ 运 算 符 ), 42 

< operator (< 运算 符 ) ,209 

> operator (< 运算 符 ), 209 

>= operator (>= 运 算 符 ), 209 

symbol (| 符号 ), 293 


passing one argument to function (将 一 个 实 参 传递 
给 一 个 函数 ), 59-62 
using objects as (使 用 对 象 作为 实 参 ), 84-87 
accessing properties of object argument《 访 问 对 
象 参数 的 属性 ), 84-85 
adding properties to object argument《 增 加 对 象 
参数 的 属性 ) 85-87 
Vs. parameters 〈 形 参 ), 62 
arrays 〈 数 组 ), 104-121 
array methods 〈 数 组 方法 ), 110-117 
adding and removing elements (添加 和 删除 
元 素 ), 111 
forEach method (forEach 方法 ), 113-117 
slice method (slice 方法 ), 112 
splice method (splice 方法 ), 112-113 
converting JSON data into objects and arrays with 
(将 JSON 转换 为 对 象 和 数组 ), 378 
creating 《创建 ), 105-106 
displaying data from (显示 数据 ), 311-314 
elements of accessing (元 素 ， 访 问 ), 106-110 
player items array 〈 玩 家 的 物品 数组 ), 118-121 
assignment operator 〈 赋 值 运算 符 ), 18, 74 


attempted property (attempted 属性 ), 34 
{{author}} placeholder (ffauthor}} 占 位 符 ) 348, 350 
author property (author 属性 ), 349 
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国 B 


backslash character( 反 和 斜 杠 符 ), 36 
between function, using in guessing game (between 疯 
数 ， 用 于 猜 数字 游戏 ) 231-232 
bins, creating (bins， 创 建 ), 225, 227 
blank function (blank 函数 ), 91-92 
blogs, writing (博客 ), 35 
body element (body 元 素 ), 333 
body key (body 键 ), 354 
body property (body 属性 ), 349 
body tag (body 标签 ), 308, 319 
book variable (book 变量 ), 30 
bookAuthor variable (bookAuthor 变量 ), 28 
bookTitle variable (bookTitle 变量 ), 28 
boolean values 〈 布 尔 值 ), 200 
box method (box 方法 ), 100 
bracket notation 〈 括 号 运算 符 ), 147-168 
using square brackets instead of dots 〈 使 用 方 括号 
代替 圆 点 ), 148-155 
people’s names as keys 《人 们 的 名 字 作 为 键 )， 
150—152 
word counts (单词 统计 ), 152-155 
using with Crypt〈 在 The Crypt 中 使 用 ) 


国人 


cache, Crypt game 〈 缓 存 ，The Crypt 游戏 ), 380 

calculateSizes function (calculateSizes 函数 ), 85-87 

calculateTax function (calculateTax 函数 ), 50 

calendars, creating (创建 日 历 ), 35-36 

callback function (回调 函数 ), 370 

calling functions《〈 调 用 函数 ), 46-48 

callOutCharge variable (callOutCharge 变量 ), 21 

camel casing 〈 骆 能 命名 法 ), 23 

Cascading Style Sheets. See CSS 〈 级 联 样式 表 。 见 
CSS ) 

chaining calls, replacing one string with another (连续 
调用 ， 用 一 个 字符 串 替 换 另 一 个 ), 348-349 

challenges object (challenges 对 象 ), 258 

challenges, Crypt game (挑战 , 在 The Crypt 游戏 中 
291-292 

character argument (character 参数 ), 99 


checkAnswer function (checkAnswer 函数 ), 214 
352 


game controls (游戏 控制 ), 164-167 
linking places via exits (通过 出 口 连接 各 个 场 
所 ), 155-163 
break statement (break 语句 ), 338 
browser support〈 浏 览 器 的 兼容 性 ), 15 
browser, opening local files in (浏览 器 ， 打 开本 地 文 
件 ), 390 
buildExits function (buildExits 函数 ), 259-261 
buildMap function (buildMap 函数 ), 258-259， 
261_262, 288, 383 
buildPlace function (buildPlace 函数 ), 259 
buildPlaces function (buildPlaces 函数 ), 261 
buildPlanet function (buildPlanet 函数 ), 87, 89， 
123—127, 129 
buildUser function (buildUser 函数 ), 252-253 
buttons 〈 按 钮 ), 324-327 
adding to page (添加 到 页 面 ), 324-325 
listening for clicks〔 监 昕 按钮 点 击 ), 325-327， 
339-340 
writing functions to update greeting (使 用 函数 更 新 
问候 语 ), 325 


checkGameStatus (checkGameStatus 函数 ), 289, 390 
clear method (clear 方法 ), 165, 321, 340 
climbCount (climbCount 变量 ), 182 
closing tags 《结束 标签 ), 304 
CMS (content management system) 《CMS (内容 管 
理 系统 )), 344-345, 358 
code on demand 〈 按 需 代 码 ), 55 
coercion 〈 强 制 转换 ), 209 
collisions (冲突), 234-238 

using namespaces to minimize (使 用 命名 空间 来 最 

小 化 ), 237-238 

variable collisions (变量 冲突 ), 236-237 
Commands module (命令 模块 ), 335, 340, 342 
commands. See player commands (命令 ， 见 玩家 命令 ) 
commandWords array (commandWords 数组 ), 337 
comparison operators, else if statement( 比较 运算 符 ， 

else 让 语句 ) 208-209 


complete property (complete 属性 ), 291 
concatenating local files 〈 合 并 本 地 文件 ), 390-391 
conditions (条件 ), 198-220 
checking answers in quiz app 〈 检 查 测验 应 用 程 请 
中 的 答案 ), 210-214 
checking player’s answer (检查 玩家 的 答案 ), 213 
displaying question 〈 显 示 问 题 ), 212-213 
handling players answer〈 处 理 玩家 答案 ), 214 
-个 问题 ) 213 
multiple declarations with single var keyword (使 用 单 
个 var 关键 字 声明 多 个 变量 。), 211-212 
returning interface object〈 返 回 接口 对 象 ), 214 
conditional execution of code (条 件 执行 代码 )， 
199-204 
else clause (else 子 句 ), 200-202 
hiding secret number inside functions 〈 在 函数 中 
隐藏 密码 数字 ), 202-204 
ifstatement (站 语句 ), 200 
strict equality operator 〈 严 格 相等 运算 符 )， 
199-200 
Crypt-checking user input 〈 在 The Crypt 游戏 中 检 
查 用 户 输入 ), 214-220 
error messages 错误 信息 ), 216-217 
go method (go 方法 ), 215-216 
using if statement to avoid problems (使 用 让 语 
句 来 避免 问题 ), 217-220 
else if statement (else 计 语句 ), 206-209 
generating random numbers withMath.random() 
method( 使 用 Math.random() 方 法 生成 随机 数 ) 
204-200 
Console panel (Console 控制 面板 ), 7, 224, 228-229 
console prompt《 控 制 台 提示 符 ), 75-77 
calling functions at〈 调 用 函数 在 ), 75-76 
declaring new variables at (声明 新 变量 在 ), 76-77 
console.error method (console.error 方法 ), 278 
console.log function (console.log 函数 ), 8, 19, 41, 75， 
106, 109, 152,172, 316 
constructors 《构造 函数 ), 122-146 
creating multiple independent counters with (创建 
多 个 独立 计数 器 ), 182-183 
examples of (举例 ), 132-134 
using to build objects 《构建 对 象 ), 127-132 
overview 《概述 ), 127-130 


moving to next question( 显 示 下 - 


索引 


telling objects apart with instanceof operator 〈 使 用 
instanceof 运算 符 来 区 分 对 象 ), 131-132 
world building-making use of Planet constructor 
(使 用 Planet 构造 函数 创建 一 个 新 世界 )， 
130-131 
using with Crypt〈 使 用 Crypt) 
creating Place objects 〈 创 建 Place 对 象 ), 134-140 
streamlining player creation〈 简 化 玩家 创建 代 
码 ), 140_146 
content management system. See CMS (内 容 管 理 系 
统 。 见 CMS) 
Controller module (Controller 控制 器 模块 ), 284 
controllers 《控制 器 ), 280-298 
Crypt game (The Crypt 游戏 ), 284-286 
approaching controller code ( 走 进 控制 器 代码 ) 286 
controller code structure〈 控 制 器 代码 结构 ), 287 
get function 〈get 函数 ), 290-291 
go function (go 函数 ), 292-293 
initializing game 《初始 化 游戏 ), 285, 288 
listing properties of challenge (列表 说 明 挑 战 的 
属性 ), 291-292 
monitoring player health (监视 玩家 健康 )， 
288-289 
overview (概述 ), 285-286 
running game 《运行 游戏 ), 296-297 
updating display-functions that use view modules 
(更 新 显示 一 一 使 用 视图 模块 的 函数 ), 289 
use function (use 函数 ), 294-296 
user input〈 用 户 输入 ), 286 
fitness app〔 健 身 应 用 程序 ), 281-284 
controls 《控件 ), 323-342 
buttons (按钮), 324-327 
adding to page《〈 添 加 到 页 面 ), 324-325 
listening for clicks〈 监 听 按 钮 点 击 ), 325-327 
writing functions to update greeting(〈 使 用 函数 更 
新 间 候 语 ), 325 
Crypt game 《The Crypt 游戏 ) 334-342 
select element (选择 元 素 ), 327-330 
adding to page《〈 添 加 到 页 面 ), 328-329 
rateMovie function (rateMovie 函数 ), 329-330 
text boxes 〈 文 本 框 ), 330-334 
adding to page (添加 到 页 面 ), 331 
adding unordered list to display comments (添加 
无 序列 表 以 显示 注释 ), 332 
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CSS 334《〈 级 联 样式 表 ) 
getting references to new elements 〈 获 取 对 新 元 
素 的 引用 ) 332 
rateMovie function (rateMovie 函数 ), 332-334 
correct property 〈correct 属性 ), 34 


costPerHour variable (costPerHour 变量 ), 21 


counter variable (counter 变量 ), 179-181 
countUpBy1 function (countUpBy1 函数 ), 180 
Crypt game 〈The Crypt 游戏 ), 11-14, 268-277， 
314-322, 378-386 
building (构建 ), 12-14 
building game page〔 构 建 游戏 页 面 ), 384-385 
building player information strings (构建 玩家 信息 
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字符 串 ), 77-82 
for player’s name, health, and location (玩家 的 名 
字 、 健 康 和 位 置 ), 78-79 
function for player information( 
县 的 函数 ), 79-82 
cache 〈 绥 存 ), 380 
checking user input〈 检 查 用 户 输入 ), 214-220 
error messages 〈 错 误 信 息 ), 216-217 
go method (go 方法 ), 215-216 
using if statement to avoid problems (使 用 让 语 
句 以 避免 问题 ), 217-220 
controllers (控制 器 ) ,284-286 
approaching controller code ( 走 进 控制 器 代码 ) 286 
controller code structure( 控 制 器 代码 结构 ), 287 
get function (get 函数 ), 290-291 
go function (go 函数 ), 292-293 
initializing game 《初始 化 游戏 ), 285, 288 
listing properties of challenge 《列表 说 明 挑战 的 
属性 ), 291-292 
monitoring player health〈 监 视 玩 家 健康 )， 
288-289 
overview 《概述 ), 285-286 
running game (运行 游戏 ), 296-297 
updating display-functions that use view modules 
(更 新 显示 一 一 使 用 视图 模块 的 函数 ), 289 
use function (use 函数 ), 294-296 
user input 《用 户 输 入 ), 286 
CSS《〈 级 联 样式 表 ) 319-320 
displaying player information 〈 显 示 玩 家 信息 )， 
54-56, 04-09 


于 显示 玩家 信 
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health 健康 ), 66-67 
location (位 置 ) s, 67-68 
names (名 字 ), 65-66 
hiding place info 〈 隐 藏 地 点 信息 ), 191-193 
hiding player info 〈 隐 藏 玩家 信息 ), 187-191 
JavaScript’s strict mode (JavaScript 严格 模式 ), 318 
map data〈 地 图 数据 ), 253-263 
adding challenges to《〈 回 TheCrypt 地 图 数据 添加 
挑战 ), 256-257 
overview (概述 ), 255-256 
running game (运行 游戏 ), 262-263 
updating Place constructor( 更 新 Place 构造 函数 )， 
258 
using to build game map 《用 于 构建 游戏 地 图 )， 
258-262 
Map Manager module (地 图 管理 器 模块 ), 380-384 
adding place to store (添加 地 点 到 存储 中 ), 382 
loading data for single place (为 单个 地 点 加 载 数 
据 ), 382-383 
updating game controller to use( 更 新 游戏 控制 器 )， 
383-384 
message view (消息 视图 ), 320 
modules (模块 ) 
listings 《代码 清单 ), 317-318 
loading 《加 载 ), 318-319 
render method (render 方法 ), 315-316 
organizing code into modules〔 将 代码 分 解 成 模块 )， 
242-247 
place views (place 视图 ), 274-277 
model 〈 模 型 ), 274-276 
view〔 视 图 ), 276-277 
placeholders, adding 〈 占 位 符 ， 加 载 ), 318-319 
player commands via text box〔 玩 家 通过 文本 机 
命令 ), 334-342 
adding controls to page〔 问 页 面 添 加 控件 ), 335-336 
Commands module (命令 模块 ), 340-342 
join command (join 命令 ), 336-338 
listening for button clicks 《 监 昕 按钮 的 点 
339-340 
mapping text box entries to game commands (将 文 
本 框 内 容 映 射 到 游戏 命令 ), 336 
pop command (pop 命令 ), 336-338 
shift command (shift 命令 ), 336-338 
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split command (split 命令 ), 336-338 
switch block (switch 结构 ), 338-339 
player items array〈 玩 家 的 物品 数组 ), 118-121 
player object in〔 玩 家 对 象 ), 37-39 
player objects as arguments 〈 玩 家 对 象 作为 参数 )， 
101-103 
player variables 玩家 变量 ), 24-26 
player views 〈 玩 家 视图 ), 269-274 
model〈 模 型 ), 270-272 
view〔 视 图 ), 272-274 
playing 11 (运行 ), 320 
specifying exits with JS Bin file codes (用 JS Bin 
文件 代码 指定 出 口 ), 379-380 
user interaction 《用 户 交 互 ), 193-197 
using bracket notation with (使 用 括号 运算 符 )， 
155—163 


国 D 


damage property (damage 属性 ), 257, 291 
dasher function (dasher 函数 ), 234-236, 238 
data loading (数据 加 载 ), 367-386 
Crypt game (The Crypt 游戏 ), 378-386 
building game page〔 构 建 游戏 页 面 ), 384-385 
cache 〈 绥 存 ), 380 
Map Manager module〈 地 图 
380-384 
specifying exits with JS Bin file codes (用 JS Bin 
文件 代码 指定 出 ) 379-380 
fitness app 〈 健 身 应 用 程序 ), 368-377 
building 构建 ), 374-376 
JS Bin data (JS Bin 数据 ), 373-374 
locating user data〈 加 载 用 户 数据 ), 368-370 
overview (概述 ), 370 
parsing XHR response with JSON.parse (使 
JSON.parse 解析 XHR 响应 ), 372-373 
XMLHttpRequest constructor (XMLHttpRequest 
构造 函数 ), 370-372 
JSON data (JSON 数据 ), 377-378 
data object, fitness app (data 对 象 ， 健 身 应 用 程序 )， 
251-252 
data. See displaying data 〈data， 见 显示 数据 ) 
dataArray function (dataArray 函数 ), 356 
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using constructors with creating Place objects (使 用 
创建 Place 对 象 的 构造 函数 ), 134-140 
streamlining player creation( 简 化 玩家 创建 代码 
140-140 
Crypt game (continued) (The Crypt 游戏 ) 
Views, 360-366 〈 视 图 ) 
creating HTML templates for( 创 建 HTML 模板 )， 
361-362 
updating to use new templates( 针 对 新 模板 更 新 
视图 ), 362-365 
CSS (Cascading Style Sheets) 〈 级 联 样式 表 ) 
Crypt game 《The Crypt 游戏 ) 319-320 
overview〔 概 述 ), 302 
text boxes (文本 框 ), 334 
CSS panel, JS Bin (CSS 面板 ), 7 
curly braces 〈 花 括号 ), 44, 351 


dataObject.name (dataObject.name), 251 
dateString function (dateString 函数 ), 134 
dayInWeek variable (dayInWeek 变量 ), 108 
defining functions 〈 定 义 函 数 ) 

new functions 〈 新 函数 ), 44-45 

using function expressions and function declarations 

《使 用 函数 表达 式 和 函数 声明 ), 45-46 

dependencies〈 依 赖 ), 227 
description property (description 属性 ), 135 


destination argument (destination 参数 ), 190 
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destinations variable (destinations 变量 ), 175, 216 


direction parameter (direction 形 参 ), 215 


direction string (direction 字符 串 ), 158 
displaying data( 显示 数据 ), 264-279 
fitness app〔 健 身 应 用 程序 ), 265-268 
creating views 创建 视图 ), 266-267 
using modules to switch views〔( 使 用 模块 切换 视 
图 ), 267-268 
人 rom array〈 数 组 之 中 ), 311-314 
message view (message 视图 ), 278 
place views (place 视图 ), 274-277 
player views (player 视图 ), 269-274 
displayMenu function (displayMenu 函数 ), 47 
displaySale function (displaySale 函数 ), 50 
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displaySizes function (displaySizes 函数 ), 86-87 
div elements (div 元 素 ), 312, 319-320, 345, 355 
<div> tag (<div> 标 签 ), 307 

do keyword (do 关键 字 ), 22 

doAction function (doAction 函数 ), 339 
DOCTYPE tag (DOCTYPE 标签 ), 305 
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else clause (else 子 句 ), 200-202, 207 

else if statement (else 让 语句 ), 206, 208-209 
empty object〈 空 对 象 ), 30 

equals symbol 〈 等 号 ), 18 


error messages 〈 错 误 信 息 ) 
checking user input 〈 检 查 用 户 输入 ), 216-217 
JS Bin (JS Bin), 9_10 
escape sequence( 转 义 符 ), 92 
exits variable (exits 变量 ), 175, 275 
exits, in Crypt game 〈 出 口 ， 在 The Crypt 游戏 中 )， 
155—163 
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failure property〔 失 败 属性 ), 257, 291 
fles《〈 文 件 ) 
filenames 〈 文 件 名 ), 225 
importing into other projects 《将 文件 导入 其 他 项 
目 ), 226-229 
adding script element (添加 script 元素), 227-228 
creating bins (创建 bins), 227 
refreshing page〈 刷 新 页 面 ), 228 
running program 〈 运 行程 序 ), 228-229 
writing code (编写 代码 ), 227 
importing multiple files (导入 多 个 文件 ), 232-234 
viewing individual code file (查看 单个 代码 文件 226 
See also local files (参阅 本 地 文件 ) 
fill function (fill 函数 ), 355-356 
fillList function (fillList 函数 ), 356 
findPlanetPosition function (findPlanetPosition 函数 ),71 
findTotal function (findTotal 函数 ), 46 
fitness app 〈 健 身 应 用 程序 ), 249-253, 265-268 
building〈 构 建 ) 374-376 
controllers 《控制 器 ), 281-284 
converting data into user model 将 数据 转换 为 
户 模型 ), 252-253 
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document.getElementById method (document. 
getElementById 方法 ), 310, 316 

dot notation〈 圆 点 运算 符 ), 32, 89, 147-151, 160， 
166-167, 345 

double curly braces 〈 双 花 括 号 ), 346 

double quotation marks 〈 双 引号 ), 346 


adding exits object to full Place constructor( 将 exits 
对 象 添加 到 完整 的 Place 构造 函数 ) 161-163 

creating functions to add and display exits (创建 一 
个 添加 并 显示 出 口 的 函数 ), 158-159 

giving each place object its own set of exits( 设 
个 场所 对 象 的 出 口 集合 ), 159-161 

testing Place constructor〔 测 试 Place 构造 函数 )， 
163 

using an object to hold exits〔 使 用 对 象 存放 出 口 )， 
156-—158 
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creating views〔 创 建 视图 ), 266-267 
data object (data 对 象 ), 251-252 
loading data〔 加 载 数据 ), 368-377 
JS Bin data (JS Bin 数据 ), 373-374 
locating user data (加 载 用户 数 据 ), 368-370 
overview (概述 ), 370 
parsing XHR response with JSON.parse (使 用 
JSON.parse 解析 XHR 响应 ), 372-373 
XMLHttpRequest constructor (XMLHttpRequest 
构造 函数 ), 370-372 
User constructor (user 构造 函数 ), 250-251 
using modules to switch views (使 用 模块 切换 视 
图 ), 267-268 
floor method (floor 方法 ), 205 
focus method (focus 方法 ), 340 
forEach method (forEach 方法 ), 110, 113-117, 133, 157 
friend variable (friend 变量 ), 76-77 
fulIMessage variable (fullIMessage 变量 ), 73 
function body〈 函 数 体 ), 44 
function invocation operator 〈 函 数 调用 运算 符 ), 240 
function keyword (function 关键 字 ), 22, 44-45, 56, 106 
functions 〈 函 数 ), 40-56 


calling (调用 ), 46-48 

calling at console prompt《 在 控制 台 提 示 符 下 进行 
调用 ), 75-76 

defining new functions《〈 定 义 新 图 数 ), 44-45 

using function expressions and function declarations 
〈 使 用 函数 表达 式 和 函数 声明 ), 45-46 

hiding secret number inside〈 在 函数 中 隐藏 密码 数 
字 ), 202-204 

hiding variables using (隐藏 变量 ), 180-181 

invoking (调用 ), 240-241 

passing information to 〈 传 递 信 息 ), 59-64 


passing multiple arguments to fonction〈 将 多 个 
实 参 传递 给 一 个 函数 ), 63-64 
passing one argument to function (将 一 个 实 参 传 
递 给 一 个 函数 ), 59-62 
recognizing function expressions (识别 函数 表达 
式 ), 240 
repetition in code and (代码 重复 ), 40-43 
adding tax and displaying summary (加 税 算出 总 
成 本 ), 42-43,50-52 
displaying object properties as text (将 对 象 的 属 
性 作为 文本 予以 显示 ), 41-42,48-49 
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game.get() method (game.get() 方 法 ), 336 

game.init method (game.init 方 法 ), 296 

get method (get 方 法 ), 214,218,287,290_291,334 

getBorder function (getBorder 函 数 ), 79-80 

getById function 〈getById 函 数 ), 333 

getChallenge method (getChallenge 方 法 ), 258,292 

getCount, creating multiple independent counters with 
(使 用 getCount 创 建 多 个 独立 计数 器 ), 181-182 

getCounter function (getCounter 函 数 ), 180 

getData method (getData 方 法 ), 250-251, 265, 267， 

274,276 

getExit method (getExit 方 法 ), 191,193,215-217 

getExits method (getExits 方 法 ), 139 

getExitsInfo function (getExitsImnfo 函 数 ), 277 

getGame function (getGame 函 数 ), 195-196,214,217,243 

getGreeting function 〈getGreeting 函 数 ), 325 

getGuesser function (getGuesser 函 数 ), 202-203 

getHelloTo function (getHelloTo 函 数 ), 72-73,77 

getInfo method (getInfo 方 法 ), 135-136,272 
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returning data from 〈 返 回 数 据 ) 
return keyword (return 关键 字 ), 72 
return value as replacement for function call ( 
返回 值 蔡 代 函 数 调 用 ), 71 
using arguments to determine return value (使 用 
参数 来 确定 返回 值 ), 72-75 
returning objects from (返回 对 象 ), 87-91 
| ), 57—59 
setting as properties of arguments(methods)( 设 ; 
参数 的 属性 〈 方 法 ) ), 91-100 
box method (box 方法 ), 100 
line method (line 方法 ), 98-99 
math methods (math 方法 ), 92-94 
namespaces〈 命 名 空间 ), 91-92 
spacer (spacer), 96-97 
string methods (string 方法 ), 94-95 
wrap method (wrap 方法 ), 99-100 
using to build objects 构建 对 象 ), 123-127 
adding methods (添加 方法 ), 125-127 
adding properties (添加 属性 ), 124-125 
Further Adventures exercises, JS Bin 〈 进 阶 练习 ，JS 
Bin), 9 
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getItems method (getItems 方 法 ), 359 
getItemsInfo function 〈getItemsInfo 函 数 ), 277 
getLastItem method (getLastItem 方 法 ), 191,193,291 
getMessage function (getMessage 函 数 ), 71-72, 76 
getMessageInfo function (getMessageInfo 函 数 ), 278 
getMovieHTML method (getMovieHTMI 方 法 ), 313 
getPlace method (getPlace 方 法 ), 144,190,193,272,286 
getPlanetInfo function (getPlanetInfo 函 数 ), 84,87 
getPlayerHealth function (getPlayerHealth 函 数 ), 78 
getPlayerInfo function 〈getPlayerInfo 函 数 ), 79-80， 
101.120 
getPlayerName function 〈getPlayerName 函 数 ), 78 
getPlayerPlace function 〈getPlayerPlace 函 数 ), 71,78 
getQuestion function 〈getQuestion 函 数 ), 212 
getQuiz function (getQuiz function 函 数 ), 186,210,239 
getStateCode function (getStateCode 函 数 ), 149 
getTitle method (getTitle 方 法 ), 139 
getTitleInfo function (getTitleImnfo 函 数 ), 277 
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getVisitorReport function (getVisitorReport 函 数 ), 109 
global namespace 〈 全 局 命名 空间 ), 183 
global variables 〈 全 局 变量 ), 173, 183, 240 
dangers of (危险 性 ), 172-177 
bugs〔 错 误 ), 177 
naming collisions (命名 冲突 ), 176 
peeking and tweaking (偷窥 和 算 改 ), 173-174 
relying on implementation 〈 借 助 于 实现 ), 174-176 
using window object to check for( 使 用 window 对 
象 来 检查 全 局 变量 ), 245-246 
go method (go 方法 ) , 166,214-216,218,287,290， 


383-384 
checking user input with 〈 检 查 用 户 输入 ), 215- 
216 
国 H 


<hl> tag (<hl> 标 签 ), 304,307 
<h2> tag (<h2> 标 签 ), 307 
hasItem method (hasItem 方法 ), 270, 272 
head section (head 部 分 ), 319,389 
<head> tag (<head> 标 签 ), 308 
help resources (获取 帮助 ), 391-392 
HIML (HTML), 301-322 
adding content 〈 添 加 内 容 ), 305-306 
function declarations (水 数 声明 ), 311 
id attribute (id 属性 ), 310-311 
to web page with JavaScript 〈 使 用 JavaScript 向 
Web 页 面 添加 内 容 ) 309-311 
when user doesn’t have JavaScript 〈 当 用 户 没有 
JavaScript 时 ), 311 
common elements (常见 的 HTML 元 素 ), 307-308 
comparing news item data and (对 比 新 闻 数 据 ), 345 


国 I 
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id attribute (id 属性 ), 310-311,325,331-332 
IDEs (integrated development environments) 
(IDEs 集成 开发 环境 ) ), 388 
计 condition (站 条件), 293 
ifkeyword (站 关键 字 ), 22 
ifstatement (让 语句 ), 199,351 
conditional execution of code (条 件 执行 代码 ) 200 


358 


< 


moving player to destination〈 将 玩家 移动 至 
目的 地 ) 216 
retrieving player’s location (获取 玩家 位 置 ), 215 


using direction to find destination〈 通 过 方向 
来 寻找 目的 地 ), 215 
Crypt game 〈The Crypt 游戏 ), 292-293 
gpwj namespace (gpwj 命名 空间 ), 358,373 
gpwj.data.load method (gpwj.data.load 方法 ), 374 
gpwij.templates function (gpwj.templates 函数 ), 360 
greater than operator 〈 大 于 运算 符 ), 209 
greater than or equal to operator (大 于 或 等 于 运算 
符 ), 209 
guess function (guess 函数 ), 199, 205 
guess variable (guess 变量 ), 202 


constructing by string concatenation( 通 过 连接 字符 
来 构造 HTML ), 345-346 
Crypt game 〈The Crypt 游戏 ), 314-322 
CSS (CSS 级 联 样式 表 ), 319-320 
JavaScripbs strict mode (JavaScript 严格 模式 ), 318 
message view (message 视图 ), 320 
modules (模块 ), 315-319 
placeholders 〈 占 位 符 ), 318-319 
playing game (运行 游戏 ), 320 
displaying data from array〈 从 数组 显示 数据 )， 
311-314 
lists (列表 ), 306-307 
loading layers 《加 载 图 层 ), 303-304 
overview 《概述 ), 302-304 
starting with empty page 《从 空白 页 面 开始 ), 305 
HTML panel, JS Bin (HTML 面板 ，JS Bin), 6 
html tags (html 标签 ), 305 
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using to avoid user input problems (使 用 站 语句 以 
避免 用 户 输入 问题 ), 217-220 
if-else blocks (if-else 代码 块 ), 338 
if-else statement (if-else 语句 ), 207 
IIFE (immediately invoked function expressions) (IIFE CY 
即 调用 函数 表达 式 ) ) 238-242 
invoking functions 〈 调 用 函数 ), 240-241 


overview 〈 概 述 ), 241 
recognizing function expressions〈 识 别 函数 表达 
式 ), 240 
returning information ffom 〈 返 
implementation (实现 ), 175, 186 
importing (导入 ) 
files into other projects 《将 文件 导入 其 他 项 目 ) 
adding script element (添加 script 元 素 ), 227-228 
creating bins (创建 bins), 227 
refreshing page〈 有 刷新 页 面 ), 228 
running program 〈 运 行程 序 ), 228-229 
writing code (编写 代码 ), 227 
modules (模块 ), 359-360 
multiple files (多 个 文件 ), 232-234 
number generator (数字 生成 器 ), 229-232 
picking random questions in quizapp 〈 在 测验 应 
用 程序 中 随机 选择 问题 ) 230-231 
using between function in guessing game (在 猜 数 
字 游 戏 中 使 用 between 函数 ), 231-232 
index variable (index 变量 ), 117 
indexOf method (CindexOf 方法 ), 95,98,272, 352 
infinite loop 《无 限 循 环 ), 352 
init method (init 方法 ), 283, 288, 296, 374, 383-384 


国 J 


JavaScript panel, JS Bin (JavaScript 面板 , JS Bin), 7 
join array method (join 数组 方法 ), 153 
join command (join 命令 ), 336-338 
join method Gjion 方法 ), 110, 130 
JS Bin (JS Bin), $-10,223-226 

account, getting〈 获 取 账 户 ), 10 

code comments 《代码 注释 ), 9 

creating bins 《创建 bins), 225 
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信息 ), 241-242 


error messages 错误 信息 ), 9-10 

filenames (文件 名 ), 225 

following code listings on 〈 在 JS Bin 上 运行 代 
码 清单 ) 7-8 

Further Adventures exercises〈 进 阶 练习 ，JS Bin), 9 

line numbers 〈 行 号 ), 10 

loading data〈 加 载 数据 ), 373-374 

loading HTML layers in (在 JSBin 中 加 载 网 层 )， 
304 
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innerHTML property (innerHTML 属性 ), 310,314, 325 
inPlay variable (inPlay 变量 ), 212, 288 
input element (input 元 素 ), 331 


instanceof operator, telling objects apart with (使 用 
instanceof 运算 符 来 区 分 对 象 ), 131-132 
integrated development environments.See IDEs interfaces 
(集成 开发 环境 。 见 IDE 界面 , 174,179-183 
creating multiple independent counters with constructor 
function〔 用 构造 函数 创建 多 个 独立 的 计数 
右 ), 182-183 
creating multiple independent counters with getCount 
(使 用 getCount 创建 多 个 独立 计数 器 )， 
181-182 
using function to hide variables (使 用 函数 来 隐藏 
变量 ), 180-181 
invoking functions (调用 函数 ), 46 
itemConsumed property (itemConsumed 属性 )， 
257,291 
itemIndex variable (itemIndex 变量 ), 117 
items array (items 数组 ), 113-114,118,120 


items parameter (items 参数 ), 137 


items variable (items 变量 ), 111 


到 控制 台 ), 8-9 


上 上 
AH 


logging to console 〈 输 量 
panels 《面板 ), 6-7 
Console panel (Console 面板 ), 7 
CSS panel (CSS 面板 ), 7 
HTML panel CHTML 面板 ), 6 
JavaScript panel (JavaScript 面板 ), 7 
Output panel (Output 面板 ), 7 
specifying Crypt game exits 《识别 The Crypt 游戏 
出 口 ), 379-380 
viewing individual code file〈 查 看 单个 代码 文件 )， 
226 
writing code (编写 代码 ), 225 
JSON.parse (JSON.parse 方法 ) 
converting JSON data into objects and arrays with 
(将 JSON 转换 为 对 象 和 数组 ), 378 
parsing XHR response with (使 用 JSON.parse 解析 
XHR 响应 ), 372-373 
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kalliesCode namespace (kalliesCode 命名 空间 ), 238 
keys array (keys 数组 ), 151 


国志 


layers, HTML 图 层 ，HTML), 303-304 
length property (length 属性 ) , 100, 103, 107, 213, 231 
less than operator 〈 小 于 运算 符 ), 209 
less than or equal to comparison operator 〈 比 较 运 算 
符 〈 小 于 或 等 于 7, 289 
lessthan or equal to operator 〈 小 于 或 等 于 运算 符 ) ,209 
<li> tag 〈<]i> 标 签 ), 306,308 
line method (line 方法 ), 93, 96, 98-99 
line numbers, JS Bin (line 号 ，JS Bin), 10 
lineLength variable (lineLength 变量 ), 93 
link element (link 元 素 ), 304, 389 
link tag (link 标签 ), 303 
lists (列表 ) 
building with template〈 使 用 模板 构建 列表 )， 
333-350 
HIML (HTML),306-307 
load function (load 函数 ), 373-374, 382 
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map data, Crypt game (地 图 数据 ，The Crypt 游戏 )， 
233-203 
adding challenges to( 向 TheCrypt 地 图 数据 添加 
挑战 ), 256-257 
overview (概述 ), 255-256 
running game (运行 游戏 ), 262-263 
updating Place constructor( 更 新 Place 构造 函数 )， 
258 
using to build game map 建 游戏 地 图 ), 258-262 
Map Manager module, Crypt game 〈 地 图 管理 器 模 
块 ，The Crypt 游戏 ), 380-384 
adding place to store〈 添 加 地 点 到 存储 中 ), 382 
loading data for single place (为 单个 地 点 加 载 数 
据 ), 382-383 
updating game controller to use (更 新 游戏 控制 器 ), 
383-384 
mapData.places array (mapData.places 数组 ), 260 
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性 “ 键 - 值 对 ”), 30-32 


key-value pairs, properties as ( 
keywords (关键 字 ), 22-23 


loadData function (loadData 函数 ), 370,390 
loadNewLevel() method 4 (loadNewLevel() 方 法 ) 
loadPlace method (loadPlace 方法 ), 381-382, 384 
loadUser method (loadUser 方法 ), 369-370,374 
local files (本 地 文件 ), 387-391 
concatenating and minifying 〈 合 并 和 压缩 )， 
390-391 
opening in browser (在 浏览 器 中 打开 ), 390 
saving〈 保 存 ), 388-390 
writing code (编写 代码 ), 388 
local scope (局 部 范围 ), 177 
local variables (局 部 变量 ), 240 
assigning namespace properties to 将 命名 空间 属 
性 分 配给 局 部 变量 ), 246-247 
benefits of (局 部 变量 的 优势 ), 177-178 
log method (log 方法 ), 283 
longString variable (longString 变量 ), 98 


ut 


math methods (math 方法 ), 92-94 

Math namespace (Math 命名 空间 ), 205 

Math.ceil method (Math.ceil 方法 ), 205 

Math.floor (Math.floor 方法 ), 326 

Math.max method (Math.max 方法 ), 93,102 

Math.min method (Math.min 方法 ), 92 

Math.random() method, generating random numbers 

with (使 用 Mathrandom() 方 法 生成 随机 数 )， 
204-206 

Math.round method (Math.round 方法 ), 205 


message parameter (message 参数 ), 60-61 


message property (message 属性 ), 257,291 
message variable (message 变量 ), 57-58,60-61 


message view (message 视图 ) 
Crypt game 《The Crypt 游戏 ), 320 
overview (概述 ), 278 
using templates 《使 用 模板 ), 362-363 


methods (方法), 91-100 
array methods (数组 方法 ), 110-117 
adding and removing elements 〈 添 加 和 删除 元 
素 ), 111 
forEach method (forEach 方法 ), 113-117 
slice method (slice 方法 ), 112 
splice method (splice 方法 ), 112-113 
box method (box 方法 ), 100 
line method (line 方法 ), 98-99 
math methods (math 方法 ), 92-94 
namespaces and (命名 空间 ), 91-92 
spacer (spacer), 96-97 
string methods (string 方法 ), 94-95 
wrap method (wrap 方法 ), 99-100 
minifying local files (压缩 本 地 文件 ), 390-391 
models (模块 ), 248-263 
fitness app〔 健 身 应 用 程序 ), 249-253 
converting data into user model〈 将 数据 转换 
为 用 户 模型 ), 252-253 
data object (data 对 象 ), 251-252 
User constructor (user 构造 函数 ), 250-251 
map data〈 地 图 数据 ), 253-263 
adding challenges to《〈 向 TheCrypt 地 图 数据 
添加 挑战 ), 256-257 
overview (概述), 255-256 
running game (运行 游戏 ), 262-263 
updating Place constructor (更 新 Place 构造 函 


数 ), 258 
using to build game map〔 构 建 游戏 地 图 )， 
258-262 


See also controllers (参见 控制 器 ) 
modules (模块), 221-247 
collisions (冲突 ), 234-238 
using namespaces to minimize (使 用 命名 空间 来 
最 小 化 ), 237-238 
variable collisions (变量 冲突 ), 236-237 
Crypt game 《The Crypt 游戏 ) 
listings (列表 ), 317-318 
loading (加 载 ), 318-319 
render method (render 方法 ), 315-316 
immediately invoked function expressions〈 立 即 调 


函数 表达 式 ), 238-242 
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invoking functions (调用 函数 ), 240-241 
overview (概述 ), 241 
recognizing function expressions〈 识 别 函 数 表达 
式 ), 240 
returning information from (返回 信息 ), 241-242 
importing files into other projects (将 文件 导入 到 其 
他 项 目 ), 226-229 
adding script element (添加 script 元 素 )， 
227-228 
creating bins (创建 bins), 227 
refreshing page 《刷新 页 面 ), 228 
running program〔 运 行程 序 ), 228-229 
writing code 编写 代码 ), 227 
importing multiple files (导入 多 个 文件 ), 232-234 
importing number generator( 导入 数字 生成 器 )， 
229-232 
picking random questions in quiz app 〈 在 测验 应 
用 程序 中 随机 选择 问题 ), 230-231 
using between function in guessing game( 在 猜 数 
字 游 戏 中 使 用 between 函数 ), 231-232 
JS Bin (JS Bin), 223-226 
creating bins (创建 bins), 225 
filenames (文件 名 ), 225 
viewing individual code file (查看 单个 代码 文 
件 ), 226 
writing code (编写 代码 ), 225 
news page (fitness app) (健身 应 用 程序 ), 357-360 
importing modules (导入 模块 ), 359-360 
news data〈 新 闻 数 据 ), 358-359 
templating functions (模板 函数 ), 357-358 
organizing code into 〈 组 织 代 码 ), 242-247 
sharing namespace across modules 〈 跨 模块 共享 
命名 空间 ), 244-247 
using to switch views《〈 使 用 模块 切换 视图 ), 267-268 
moons property (moons 属性 ), 129 
mountain variable (mountain 变量 ), 172-173,177 
move function (move 函数 ), 89-90 


movie variable (movie 变量 ), 49 


multiplication operator 〈 乘 法 运算 符 ), 21 


My Movie Ratings page (My Movie Ratings 页 面 )， 


325,329 
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name parameter (name 参数 ), 76,250 
namespaces 《命名 空间 ), 91-92, 183 
minimizing collisions with (减少 冲突 ), 237-238 
sharing across modules 〈 跨 模块 共享 ), 244-247 
assigning namespace properties to local variables 
(将 命名 空间 属性 分 配给 局 部 变量 )， 
246-247 
window object (window 对 象 ), 244-246 
using object as (将 对象 用 作 ), 184-185 
name-value pair( 名 称 - 值 对 ), 31 
new keyword (new 关键 字 ), 127, 157, 182, 188, 270 
new-line character〔 换 行 符 ), 91-92 
newLine function (newLine 函数 ), 91-92 
news page (fitness app)“ 新 的 页 面 (健身 应 用 程序 ) 
344-347, 357-360 


comparing news item data and HTML 〈 对 比 新 闻 数 


据 和 HTML ), 345 


constructing HTML by string concatenation( 通 过 连 


接 字符 串 来 构造 HTML ), 345-346 
designing with HTML templates (使 用 HTML 模 板 
进行 设计 ), 346 
modules (模块 ), 357-360 


国 O 


object properties, matching template placeholders with 
(将 模板 占 位 符 与 对 象 属性 相 匹 配 ), 353-354 
Object.keys method (Object.keys 方 法 ), 151,354 
objects 《对 象 ), 27-39, 83-103 
accessing properties of 访问 属性 ), 32-33 


converting JSON data into objects and arrays with 
(将 JSON 转 换 为 对 象 和 数组 ), 378 
creating 〈 创 建 ), 29-32 
empty object〈 空 对 象 ), 30 
properties as key-value pairs〈 属 性 “ 键 - 值 对 ”)， 
30-32 
Crypt game player object 〈The Crypt 游 戏 的 玩家 对 
象 ), 37-39 
overview (概述 ), 28-29 
player objects as arguments 〈 玩 家 对 象 作为 参数 )， 
101-103 


362 


importing (导入 ), 359-360 
news data 新闻 数 据 ), 358-359 
templating functions (模板 函数 ), 357-358 
using script tags for templates (使 用 script 标 签 包 于 
模板 ), 346-347 
next function (next 函数 ), 183, 214 
nextYear array (nextYear 数组 ), 106 
not strictly equal to operator (不 严格 相等 运算 符 )， 
209 
notes property (notes 属性 ), 36 
null value〈 空 值 ), 141 
Number Generator code (数字 生成 器 代码 ), 223 
number generator, importing (导入 数字 生成 器 )， 
229-232 
picking random questions in quiz app〈 在 测验 应 
程序 中 随机 选择 问题 ), 230-231 
using between function in guessing game〔 在 猿 数 字 
游戏 中 使 用 between 函 数 ), 231-232 


LU 


numberOfHours variable (numberOfHours 变 量 ), 21 


numberToSquare parameter (numberToSquare 参 数 )， 
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returning from functions 〈 从 函数 返回 ), 87-91 
setting functions as properties oftmethods) 〈 设 置 
数 作为 属性 〈 方 法 )), 91-100 
box method (box 方 法 ), 100 
line method (line 方 法 ), 98-99 
math methods (math 方 法 ), 92-94 
namespaces〈 命 名 空间 ), 91-92 
spacer (spacer), 96-97 
string methods (string 方 法 ), 94-95 
wrap method (wrap 方 法 ), 99-100 
updating properties of (更 新 属性 ), 33-35 
using as arguments (使 用 对 象 作为 参数 ), 84-87 
accessing properties of object argument( 访 问 对 象 
参数 的 属性 ) 84-85 
adding properties to object argument (增加 对 象 参 
数 的 属性 ), 85-87 
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using as namespace 《用 作 命 名 空间 ), 184-185 
using constructors to build〈 使 用 构造 函数 来 构 
127,132 
overview 〈 概 述 ), 127,130 
telling objects apart with instanceof operator( 使 
instanceof 运 算 符 来 区 分 对 象 ), 131-132 
world building-making use of Planet constructor 
(使 用 Planet 构 造 函 数 创 建 一 个 新 世界 )， 
130-131 
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<p> tag <p> 标签 ), 304, 306-307 
parameters vs. arguments ( 形 参 与 实 参 ), 62 
parentheses 〈 圆 括号 ), 44, 47 
parseCommand function (parseCommand 函 数 ), 339 
peakCount function (peakCount 函 数 ), 182 
Place constructor, updating (Place 构造 函数 ， 更 新 ), 258 
Place object (Place 对 象 ), 135, 139, 144,158,161,166 
place property 《place 属 性 ), 142, 144 
place variable (place 变 量 ), 215-216 
place views (place 视 图 ), 274-277 
model〈 模 型 ), 274-276 
using templates (使 用 模板 ), 364-365 
view〔 视 图 ), 276-277 
placeholders 〈 占 位 符 ) 


automating placeholder replacement for templates 
《自动 奉 换 模板 中 的 占 位 符 ) 353-356 
building lists〈 构 建 列 表 ), 355-356 
filling all placeholders for each key 为 每 个 
“ 键 ” 填 充 所 有 的 占 位 符 ) 355 
matching template placeholders with object 
properties( 将 模板 占 位 符 与 对 象 属性 相 匹 
配 ), 353-354 
Crypt game 《The Crypt 游 戏 ) 318-319 
See also templates 〈 另 见 模板 ) 
places array (places 数 组 ), 255 
placesStore object (placesStore 对 象 ), 260 
placeView function (placeView 函 数 ), 269 
Planet function (Planet 函 数 ), 127,129 
planet parameter (planet 参 数 ), 84,87 


planetl variable (planet1 变 量 ), 86 


using functions to build〈 使 用 函数 来 构建 )， 
123-127 
adding methods (添加 方法 ), 125-127 
adding properties 〈 添 加 属性 ), 124-125 
<ol> tag 〈<ol> 标 签 ), 306-308 
opening tags 《开始 标签 ), 304 
option elements (option 元 素 ), 327-328 


options array (options 数 组 ), 133 
OR operator (OR 运 算 符 ), 293 
Output panel, JS Bin 〈 输 出 面板 ，JS Bin), 7 


planet.area property (planet.area 属 性 ), 87 
planets variable (planets 变 量 ), 126-127 


planet.volume property (planet volume 属 性 ), 87 
player commands, Crypt game( 玩 家 命令 , The Crypt 
游戏 ), 334-342 
adding controls to page《〈 问 页 面 添加 控件 )， 
335-336 
Commands module (命令 模块 ), 340-342 
join command (jion 命 令 ), 336-338 
listening for button clicks 《监听 按钮 的 点 击 )， 
339-340 
mapping text box entries to game commands (将 
文本 框 内 容 映 射 到 游戏 命令 ), 336 
pop command (pop 命 令 ), 336-338 
shift command (shift 命 令 ), 336-338 
split command (split 命 令 ), 336-338 
Switch block 《switch 结构 ), 338-339 
Player constructor (Player 构 造 滑 数 ), 243, 245， 
270-271,285 
player information, displaying 〈 玩 家 信息 ， 显 示 )， 
04-09 
health〈 健 康 值 ), 66-67 
locations (位 置 ), 67-68 
names (名 字 ), 65-66 
Player module (Player 模 块 ), 245 
Player objects (Player 对 象 ), 140, 165 
player variable (player 变 量 ), 54, 56, 64, 288 
player views (player 视 图 ), 269-274 
model〔 模 型 ), 270-272 
using templates (使 用 模板 ), 363-364 
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view〔 视 图 ), 272-274 
playerHealth parameter (playerHealth 参 数 ), 66 
playerInfo variable (playerInfo 变 量 ), 79 


playerName parameter (playerName 参 数 ), 66-67 
playerPlace parameter (playerPlace 参 数 ), 67 
player.place.items array (player.place.items 数 组 ), 166 
players array (players 数 组 ), 115-116 

playerView function (playerView 函 数 ), 269 


polluting global namespace 污染 全 局 命名 空间 )， 
183, 237 

pop command, Crypt game (pop 命令 ，The Crypt 游 
戏 ), 336-338 

pop method (pop 方 法 ), 110-111 


国 Q 


qIndex property (qIndex 属 性 ), 184-186 
qIndex variable (qIndex 变 量 ), 212-213 
questions array (questions 数 组 ), 212-213, 231 
quiz app《〈 测 验 应 用 程序 ) 37,210-214 
checking player's answer 〈 检 测 用 户 答案 ), 213 
creating 《创建 ), 183-187 
hiding questions array 〈 隐 藏 questions 数 组 )， 


185—187 
using object as namespace (将 对 象 用 作 命 名 空 
间 ), 184_185 


displaying question (显示 问题 ), 212-213 
handling player’s answer〈 处 理 用 户 的 答案 ), 214 


moving to next question〈 显 示 下 一 个 问题 ) 213 


国 R 


random numbers, generating with Math.random() 
method〔 随 机 数 , 使 用 Math.random() 方 法 生成 )， 
204-206 
Rate button (Rate 按 钮 ), 327 
rateMovie function (rateMovie 函 数 ), 329-330,332-334 
refreshing page, JS Bin 〈 刷 新 页 面 ，JS Bin), 228 
regular expressions, replacing string multipletimes with 
《正则 表达 式 ， 用 多 次 替换 字符 串 ), 353 
removeItem method (removeltem 方 法 ), 270, 272 
render method (render 方 法 ), 272, 277-278， 
313-317,362 
renderMessage (renderMessage), 289, 390 
repetition in code (代码 重复 ), 40-43 
364 


posted key (posted“ 键 ”), 354 
posted property (posted 属 性 ), 349 
programming 〈 编 程 ), 3-4 
properties of objects (对象 的 属性 ) 
accessing (访问), 32-33 
as key-value pairs 〈 键 - 值 对 ), 30-32 
updating 〈 更 新 ) ,33-35 
properties, displaying as text《〈 属 性 ， 显 示 为 文本 )， 
41-42 
property values (属性 值 ), 33 
prototypes 《原型 ), 123 
push method (push 方 法 ), 110-111,130 


multiple declarations with single var keyword (使 

jvar 关 键 字 声明 多 个 变量 ), 211-212 
picking random questions in 〈 挑 选 随 机 问题 )， 

230-231 

returning interface object〈 返 回 接口 对 象 ), 214 

quiz variables (quiz 变 量 ), 183,185,239 

quizMe method (quizMe 方 法 ), 183,186,210,230 

quiz.next (quiz.next), 185 

QuizQuestion constructor (QuizQuestion 构 造 函数 )， 

132 
quiz.questions array (quiz.questions 数 组 ), 184 


quiz.showMe (quiz.showMe), 185 
quiz.submit() method (quiz.submit0) 方 法 ), 214 


adding tax and displaying summary〔 加 税 算出 总 成 
本 ), 42-43 
displaying object properties as text〈 将 对 象 的 属性 
作为 文本 予以 显示 ), 41-42 
replace method (replace 方 法 ), 347-348, 350 
requires property (requires 属 性 ), 257,291 
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reserved words, for naming variables (保留 字 , 变量 命 


名 ), 22-23 
resources (资源 ), 391-392 
responseText property (responseText 属 性 ), 372 
result variable (result 变 量 ), 46 
return keyword (return 关 键 字 ), 72,83 
return statement (return 语 句 ), 72, 129 


return value (返回 值 》 
as replacement for function call (替代 函数 调用 ), 71 
determining using arguments 〈 使 用 参数 确定 )， 
72—75 
returning data from functions (从 函数 返 
70-75 
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数据 )， 


sale variable (sale 变 量 ), 52 
saving local files (保存 本 地 文件 ), 388-390 
Say Hi button (Say Hi 按钮 ), 324 
sayHello function (sayHello 函 数 ), 44, 46 
scope〔 作 用 域 ), 171-197 
Crypt game 《The Crypt 游 戏 ) 
hiding place info〔 隐 藏 地 点 信息 ), 191-193 
hiding player info〔 隐藏 玩家 信息 ), 187-191 
user interaction 《用 户 交 互 ), 193-197 
global variables, dangers of 〈 全 局 变量 ， 和 危险 性 )， 
172-177 
bugs〔 错 误 ), 177 
naming collisions〔 命 名 冲突 ), 176 
peeking and tweaking( 偷 帘 和 算 改 ), 173-174 
relying on implementation (借助 于 实现 )， 
174-176 
interfaces (接口 ), 179-183 
creating multiple independent counters with 


数 创建 多 个 


constructor function (用 构造 函 
独立 的 计数 器 ) 182-183 
creating multiple independent counters with 
getCount 〈 使 用 getCount 创 建 多 个 独立 计数 
器 ), 181-182， 
using function to hide variables〈 使 用 函数 来 隐藏 
变量 ), 180-181 
local variables, benefits of 〈 局 部 变量 ， 优 势 )， 
177-178 
quiz app, creating (创建 测验 应 用 程序 ), 183-187 
hiding questions array《〈 隐 藏 questions 数 组 ), 185-187 
using object as namespace (将 对 象 用 作 命 名 空 
间 ), 184-185 
Score property (scores 属 性 ), 34-35 
score variable (score 变 量 ), 17 
script element, adding (script 元 素 ， 添 加 ), 227-228 


return keyword (return 关 键 字 ), 72 
return value as replacement for function call (用 返回 
末代 函数 调用 ), 71 
using arguments to determine return value (使 用 参 
数 来 确定 返回 值 ), 72-75 
running program, JS Bin (运行 程序 , JS Bin ), 228-229 


Ee 
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script tags, using for templates (script 标 签 , 用 于 模板 » 
346-347 


secret variable (secret 变 量 ), 202 


secretMountain variable (secretMountain 变 量 ), 178 
select element (select 元 素 ), 327-330 
adding to page (添加 到 页 面 ), 328-329 
rateMovie function (rateMovie 消 数 ), 329-330 
selected attribute (selected 属 性 ), 329 
self-closing tag (自动 闭合 标签 ), 331 
semicolon character( 分 号 字符 ), 10 


sessions array (sessions 数 组 ), 250 
setPlace method (setPlace 方 法 ), 190, 193, 215, 272 
shift array (shift 数 组 ), 337 
shift command, The Crypt game (shift 命 令 , The Crypt 
游戏 ), 336-338 
show function (show 函 数 ), 178 
showArguments function (ShowArguments 函 数 )， 
113-110 
showCostBreakdown function (showCostBreakdown 
函数 ), 44 
showEvent method (showEvent 方 法 ), 133-134 
showExits function (showExits 函 数 ), 158-159 
showInfo method (showInfo 方 法 ) 113-114,165,190,217 
showMe function (showMe 函 数 ), 183, 186 
showMessage function (ShowMessage 函 数 ), 57-58， 
00-02 
showMountain function (showMountain 函 数 ), 173 
showMovieInfo function (showMovieInfo 函 数 ), 44， 
49, 55 
showPlanet method (showPlanet 方 法 ), 125-126 
showPlayerHealth functionCshowPlayerHealth 函 数 ) 
68 
showPlayerInfo function (showPlayerInfo 函 数 ), 55， 
64, 68,84,120 
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showPlayerName function (showPlayerName 函 数 )， 
65.68 

showPlayerPlace function 〈showPlayerPlace 函 数 )， 
67-68 

showQuestion function (showQuestion 函 数 ), 133 

showSum function (showSum 函 数 ), 63, 70 

slice method (slice 方 法 ), 110,112 

smooth operator 〈 平 稳 的 运算 符 ), 18 

social property (social 属 性 ), 349 

spacer function (spacer 消 数 ), 236 

spacer.line (spacer.line 方 法 ), 97 


spacer.newLine method (spacer.newLine 方 法 ), 139 

spacer.wrap 《spacer.wrap 方 法 ), 97 

span element (span 元 素 ), 333,345 

splice method (splice 方 法 ), 110,112-113 

split command, The Crypt game (shift 命 令 ，The 
Crypt 游 戏 ), 336-338 

split method (split 方 法 ), 153-154 

square brackets 〈 方 括号 ), 107,149 

square function (Square 函数 ), 62 

src attribute (src 属 性 ), 228-229,297,390 

statement (语句 ), 10 

states object (states 对 象 ), 148-149 

strict equality operator〈 严 格 相等 运算 符 ), 199-200 

strict mode (JavaScript) 《〈 严 格 模式 (JavaScript) )， 
318 
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template.fill method (template.fill 方 法 ), 362 
templates 《模板 ), 37,343-366 
automating placeholder replacement for( 自动 替换 
占 位 符 ), 353-356 
building lists (构建 列表 ), 355-356 
filling all placeholders for each key (为 每 个 “ 键 ” 
填充 所 有 的 占 位 符 ) 355 
matching template placeholders with object properties 
(将 模板 占 位 符 与 对 象 属性 相 匹 配 ), 353-354 
news page (fitness app) (新 页 面 (健身 应 用 程序 ) )， 
344-347, 357-360 
comparing news item data and HTML 〈 对 比 新 闻 
数据 和 HTML ), 345 
constructing HTML by string concatenation (通过 
连接 字符 串 来 构造 HTML), 345-346 
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strictly equal to operator (表示 严 格 相 等 的 运算 符 )， 
209 

string concatenation operator (字符 串 连 接 运算 符 )， 
20 

string methods (string 方 法 ), 94-95 

strings〈 字 符 串 ) 


constructing HTML by string concatenation( 通 过 
连接 字符 串 来 构造 HTML ), 345-346 
replacing multiple times〈 多 次 替换 ), 349-353 
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repeating code while condition is met〈 在 满足 
条 件 时 重复 执行 代码 ), 350-351 
replacing string while it can be found (替换 一 
个 可 以 找到 的 字符 串 ) 352-353 
replacing strings with regular expressions (使 用 
正则 表达 式 替 换 字 符 串 ) 353 
while loop (while 循 环 ), 351-352 
replacing one string with another (用 
替换 另 一 个 ), 347-349 
style tag (style 标 签 ), 303 
submit method (submit 方 法 ), 210 
substr method (substr 方 法 ), 94-95 
success property (success 属 性 ), 257,291 
switch block, The Crypt game (switch 结 构 ，The 
Crypt 游 戏 ), 338-339 
Switch keyword (switch 关 键 字 ), 22 
switch variable (switch 变 量 ), 338 
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designing with HTML templates (使 用 HTML 模 
板 进行 设计 ), 346 
modules (模块 ), 357-360 
using Script tags for templates (使 用 script 标 签 包 
里 模板 ), 346-347 
replacing strings〈 替 换 字符 串 ) 
multiple times (多 次 ), 349-353 
replacing one string with another (用 一 个 字符 串 
替换 另 一 个 ), 347-349 
views〔 视 图 ), 360-366 
creating HTML templates for (创建 HTML 模板 )， 
361-362 
updating to use new templates (针对 新 模板 更 新 
视图 ), 362-365 
Templates module (模板 模块 ), 361 


text boxes 〈 文 本 框 ), 330-334 
adding to page《〈 添 加 到 页 面 ), 331 
adding unordered list to display comments (添加 无 
序列 表 以 显示 注释 ), 332 
CSS〔 级 联 样式 表 ), 334 
getting references to new elements (获取 对 新 元 素 
的 引用 ), 332 
rateMovie function (rateMovie 函 数 ), 332-334 
text, displaying object properties as (将 对 象 的 属性 作 
为 文本 进行 显示 ), 41-42 
this variable (this 变 量 ), 157,172, 182-183,187-188， 
190-191,193 
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<ul> tag (<ul> 标 记 ), 306-308, 313 

unordered lists, adding to display comments 〈 无 序列 
表 ， 用 于 显示 评论 内 容 ), 332 

unshift method (unshift 方 法 ), 130 

updateGreeting function (updateGreeting 函 数 )， 
325-326 

updating properties of objects (更 新 对 象 属性 ), 33-35 

use function 《use 函数 ), 287, 290, 294-296, 334 


use strict statement (use strict 语 句 ), 326 


User constructor, fitness app Cuser 构 造 函数 ， 健 身 应 
程序 ), 250-251 
user input, checking (用 户 输入 ， 检 查 ), 214-220 
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value property (value 属 性 ), 330, 332, 340 
values, assigning to variables (为 变量 赋值 ), 18-19 
one-step declaration and assignment〈 一 步 实现 变量 
声明 和 赋值 ), 20 
using variable in its own assignment( 先 运算 再 赋值 
21-22 
var keyword 《var 关键 字 ), 17, 22, 28, 30, 35, 211-212 
variable collisions (变量 冲突 ), 236-237 
variables (变量 ), 16-26 
assigning namespace properties to local variables (将 
命名 空间 属性 分 配给 局 部 变量 ), 246-247 
assigning values to (赋值 ), 18-19 
one-step declaration and assignment ( 


量 声明 和 赋值 ), 20 
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thisYear array (thisYear 数 组 ), 106 
tightly coupled (紧密 ), 350 

title element (title 元 素 ), 318-319 

title key (title 键 ), 354 

title property, 135, 157 (title 属 性 ), 349 
total property (total 属 性 ), 251 

total variable (total 变 量 ), 74 

totalCost function (totalCost 国 数 ), 74-75 
toUpperCase method (toUpperCase 方 法 ), 87, 94, 96 
type attribute (type 属 性 ), 331,346 

type property (type 属 性 ), 336 


error messages (错误 信息 ), 216-217 
go method (go 方法 ), 215-216 
moving player to destination〈 将 玩家 移动 到 目的 
地 ),216 
retrieving player’s location〈 获 取 玩 家 的 位 置 ) ,215 
方向 来 寻 


using direction to find destination〈 通 过 
找 目的 地 ), 215 
using if statement to avoid problems 〔 使 用 if 语 句 避 人 免 
问题 的 出 现 ), 217-220 
user model, converting data into〈 将 数据 转换 为 用 户 
模型 ), 252-253 


userView variable (userView 变 量 ), 266 


using variable in its own assignment〈 先 运算 再 赋 

值 ), 21-22 
choosing goodnames for (选择 合适 的 变 

camel casing 〈 骆 驼 命 名 法 ), 23 

descriptive names 〈 描 述 性 变量 名 ), 24 

keywords and reserved words (关键 字 和 保留 字 )， 
22—23 

rules for naming variables (变量 的 命 


量 名 ) ,22-24 


名 规则 ), 23 
crypt game player variables (TheCrypt 游 戏 的 玩 
家 变量 ), 24-26 
declaring (声明 ), 17-18, 20 
declaring at console prompt 〈 在 控制 台 提示 符 处 声 
明 ), 76-77 
global, dangers of 〈 和 危险 的 全 局 变量 ), 172-177 
bugs 〈 漏 洞 ), 177 
naming collisions (命名 冲突 ), 176 
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peeking and tweaking〔 偷 帘 和 算 改 ), 173-174 
relying on implementation〈 借 助 于 实现 ) , 174-176 
local benefits of 〈 局 部 变量 的 优势 ), 177-178 
overview (概述 ), 17 
using window object to check for global variables( 使 
jwindow 对 象 来 检查 全 局 变量 ), 245-246 
views (视图 ), 264-279, 360-366 
creating HTML templates for (创建 HTML 模 板 )， 
361-362 
fitness app 〈 健 身 应 用 程序 ), 265-268 
creating views 《创建 视图 ), 266-267 
using modules to switch views 《使 用 模块 切换 视 
图 ), 267-268 
message view〔 消 息 视 图 ), 278 
place views 《场所 视图 ), 274-277 
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weather app《 天 气 应 用 程序 ), 36-37 
web page, adding content with JavaScript〈 使 用 
JavaScript 加 Web 页面 添 加 内 容 ), 309-311 
function declarations 〈 函 数 声明 ), 311 
id attribute (id 属 性 ), 310-311 
when user doesn’t have JavaScript〈 当 用 户 没有 
JavaScript 时 ),311 
while loops, replacing string multiple times (While 循 
环 多 次 替换 字符 串 ), 349-353 
overview (概述 ), 351-352 
repeating code while condition is met (在 满足 条 
件 时 重复 执行 代码 ), 350-351 


replacing string while it can be found ( 蔡 换 一 个 
国 X 


XHR data loading (XHR 数 据 加 载 ), 367-386 

Crypt game (TheCrypt 游 戏 ), 378-386 
building game page〔 构 建 游戏 页 面 ), 384-385 
cache 〈 绥 存 ), 380 
Map Manager module (地 图 管理 器 模块 ) ,380-384 
specifying exits with JS Bin file codes (使 用 JSBin 

文件 代码 指定 出 口 ), 379-380 

fitness app 〈 健 身 应 用 程序 ), 368-377 
building (升级 ), 374-376 
JS Bin data (JS Bin 数据 ), 373-374 
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yield keyword (yield 关键 字 ), 22 
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model 模型), 274-276 
view〔 视 图 ), 276-277 
player views〔 玩 家 视图 ), 269-274 
model〈 模 型 ), 270-272 
view〔 视 图 ), 272-274 
updating to use new templates (针对 新 模板 更 
新 视图 ), 362-365 
messages 消息 ), 362-363 
places (场所 ), 364-365 
players〈 玩 家 ), 363-364 
See also controllers 〈 另 见 探 制 器 ) 
visitorArray variable (visitorArray 变 量 ), 109 
visitors variable (visitors 变 量 ), 109 


volume property (volume 属性 ), 85 


可 以 找到 的 字符 串 ), 352-353 

with regular expressions 〈 使 用 正则 表达 式 ), 353 
window object，〈window 对 象 ) 244-246 
word counts (字数 统计 ), 152-155 
words objec (words 对 象 ) t, 152 
wrap method (wrap 方 法 ), 9-100 
wrap-and-return process (打包 - 返 
wrapping code (打包 代码 ), 196 
writing blog (撰写 博客 ), 35 
writing code 〈 编 写 代码 ) 

JS Bin (JS Bin ), 227 

local files 〈 本 地 文件 ), 388 
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过 程 ), 196 


locating user data〔 查 找 用 户 数 据 ), 368-370 

overview (概述 ), 370 

parsing XHR response with JSON.parse (使 用 
JSON.parse 解 析 XHR 响 应 ), 372-373 

XMLHttpRequest constructor (XMLHttpRequest 
构造 函数 ), 370-372 

JSON data (JSON 数据 ), 377-378 
XMLHttpRequest object (XMLHttpRequest 对 象 》367, 
309-372, 378 


The Crypt: 一 个 持续 示例 


在 本 书 的 第 一 部 分 , 读者 在 学 习 JavaScript 核心 概念 的 同时 , 就 可 以 编写 代码 来 表示 游戏 


中 的 玩家 和 地 点 ， 而 且 可 以 让 玩家 在 各 个 场所 之 间 来 回 移动 并 拾取 物品 。 下 图 展示 了 该 游戏 


中 的 基本 构件 。 在 本 书 的 每 一 章 都 有 一 张 类 似 的 图 ， 展 示 了 在 整体 游戏 中 该 章 所 涉及 的 部 分 
内 容 。 


Players 


Places Maps 
player variables place objects linking places via exits 
a player object place items Game 
showing player info place exits render 
player items showing place info get 
Player Constructor Place Constructor go 


在 本 书 的 第 二 部 分 ， 对 玩家 增加 了 挑战 : 在 没有 解决 谜 题 之 前 禁止 退出 。 这 部 分 的 重点 


是 如 何 组 织 代 码 ， 如 何 隐藏 代码 的 实现 方式 ， 如 何 检查 用 户 输 入 ， 如 何 构建 可 以 重复 使 用 和 
替换 的 模块 来 提高 项 目的 灵活 性 。 


在 本 书 的 第 三 部 分 , 读者 可 以 使 用 HTML 模板 来 更 新 游戏 的 显示 界面 ,进一步 完善 游戏 ， 


使 其 在 运 = 行 过 程 中 就 可 以 加 载 数 据 ， 还 可 以 使 用 玩家 和 场所 信息 来 填充 模板 ， 并 添加 文本 框 
和 和 斤 铀 ; 忆 全 玩家 加以 通 es 
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*** A Zombie sinks its teeth into your neck. *** 
use holy water south 


在 线 互 动 交流 平台 


官方 微 博 : http://weibo.com/cmpjsj 
豆 准 网 : http://site.douban.com/139085/ 
读者 信箱 : cmp_itbook@163.com 


开发 实 皮 

有 
Get Programming with JavaScript 
所 计算 机 科学 先进 技术 译 从 多 


实用 机 器 学 习 @ AKKA 实 战 @ JavaScript 开 发 实战 
9 敏捷 开发 实战 @ GO 实战 ”Q Spark 实 战 


内 容 简介 


本 书 是 一 本 JavaScript 开 发 入 门 指导 书 ， 主 要 介绍 了 变量 、 对 象 、 函 数 、 数 组 、 构 
造 函数 、 方 括号 运算 符 、 作 用 域 、 条 件 语句 、 模 块 、 模 型 、 视 图 、 控 制 器 、 构 建 网 页 、 
控件 、 模 板 、 数 据 加 载 等 内 容 。 书 中 涉及 的 概念 都 附 有 简短 示例 。 此 外 ， 还 有 一 个 贯 
穿 全 书 的 持续 示例 一 一 冒险 游戏 The Crypt。 读 者 可 以 在 一 个 交互 式 网 站 上 直接 运行 书 
中 的 代码 。 


关注 计算 机 分 社 官方 微 信 ， 回 复 您 购买 图 书 书号 中 间 的 五 位 数字 ， 即 可 获取 本 书 配 


” 套 资源 下 载 链接 ， 并 可 获得 和 更 多 增值 服务 和 最 新 资讯 。 
ISBN 978-7-111-58671-5 


机 械 工业 出 版 社 计 
算 机 分 社 官方 微 信 


地 址 :北京 市 百 万 庄 大 街 22 号 
邮政 编码 :100037 
电话 服务 
服务 咨询 热线 : 010-88361066 - 
读者 购书 热线 : 010-68326294 = dake 
010-88379203 工 机 工 !T 互 联网 
微 信 公 众 号 微 信服 务 
网 络 服务 人 
机 工 官 网 ，www.cmpbook.com 
机 工 官 博 : weibo.com/cmp1952 
金 书 网 : www.golden-book.com ISBN 978-7-111-58671-5 
教 网 : www.cmpedu.com 


寺 下 无 防 久 标的 为 妆 版 | 策划 编辑 〇 车 忱 / 封面 设计 〇 一 全 | 二 罗 坟 作 


